03-谷歌插件开发-内置事件

本篇给大家讲解一下谷歌插件中常用的内置事件函数

{
  "permissions": ["storage","tabs","activeTab","scripting","contextMenus","cookies"]
}

1. storage 关于存储的权限
2. tabs 可以获取tab列表
3. activeTab 可以自定义设置选中某个tab
4. scripting 自定义脚本权限
5. contextMenus 自定义右键菜单
6. cookies 操作 cookie，和用户登录态相关的功能可能会用到该权限

插件安装成功事件

chrome.runtime.onInstalled.addListener(() => {
  console.log('后台脚本运行成功！')
});

存储相关

chrome.storage.sync.set({ historyList: [] });


chrome.storage.sync.get("history", ({ historyList }) => {
    console.log(historyList)
});

设置/查看 图标徽章

//设置
chrome.action.setBadgeText({ "text": "OFF" })
//或者
chrome.action.setBadgeText({ "tabId": tab.id,"text": "OFF" })

//查看
chrome.action.getBadgeText({ tabId: tab.id })

监听用户点击插件工具栏图标事件

如果您已经配置了popup弹框页面的话，则这个事件不会起作用。

这个事件是写在background.js中的

chrome.action.onClicked.addListener(async (tab) => {
    //获取图标的徽章文本  注意必须是async
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id })
    console.log(prevState)
});

查询浏览器打开的网页

查询当前全部的网页

chrome.tabs.query({}, function (tabs) {
    tabs.forEach(tab => {
        console.log(tab)
    })
});

查询当前选中的网页

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    console.log(tabs[0])
});

网页通信

background传递content-script

background.js

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.sendMessage(
      tabs[0].id,
      { greeting: "hello" },
      function (response) {
        console.log("来自content-script的响应："+response);
      }
    );
});

content-script.js

// 监听来自background script的消息
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  console.log("来自background.js的响应："+ request);
  sendResponse("xxxx");
});