跳到主要内容

插件生命周期与浏览器事件

插件生命周期​

插件的生命周期主要包含以下阶段：

  • 安装或更新
  • 启动
  • 运行
  • 停止
  • 卸载

安装或更新​

用户第一次安装插件，或者插件有新的版本可供更新时，浏览器会加载并初始化插件。此时，插件可以在background中监听chrome.runtime.onInstalled事件，执行初始化操作

chrome.runtime.onInstalled.addListener(function(details) {
  if (details.reason == "install") {
    console.log("This is a first install!");
  } else if (details.reason == "update") {
    console.log("Updated from " + details.previousVersion + " to " + chrome.runtime.getManifest().version + "!");
  }
});

启动​

用户打开浏览器时，插件会被启动。插件可以在这个阶段初始化数据，设置默认状态等。

chrome.runtime.onStartup.addListener(function() {
  console.log("Browser started, initialize plugin data.");
});

运行​

插件被启动后，就进入了运行阶段。在这个阶段，插件可以响应用户操作，监听和处理浏览器事件，提供各种功能。

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  if (changeInfo.status == 'complete' && tab.active) {
    console.log("Active tab updated, let's do something!");
  }
});

停止​

用户关闭浏览器时，插件会被停止。插件可以监听chrome.runtime.onSuspend事件，保存数据，清理资源等。

chrome.runtime.onSuspend.addListener(function() {
  console.log("Browser is about to close, save plugin data.");
});

卸载​

用户从浏览器中卸载插件时，插件的生命周期就结束了。插件可以监听chrome.runtime.onInstalled事件的uninstall原因，执行卸载操作。

chrome.runtime.setUninstallURL("https://your_website.com/uninstall", function() {
  console.log("Uninstall URL has been set");
});

浏览器事件​

启动事件​

通过监听 chrome.runtime.onStartup 事件来知道浏览器启动。

chrome.runtime.onStartup.addListener(function() {
    console.log("Browser has been started.");
});

关闭事件​

Chrome没有提供浏览器关闭的直接事件，但是可以使用 chrome.windows.onRemoved 事件在最后一个浏览器窗口关闭时执行操作。

chrome.windows.onRemoved.addListener(function(windowId) {
    chrome.windows.getAll({}, function(windows) {
        if(windows.length == 0) {
            console.log("Browser is closing, the last window was closed.");
        }
    });
});

窗口打开事件​

通过监听 chrome.windows.onCreated 事件来知道新窗口打开。

chrome.windows.onCreated.addListener(function() {
    console.log("New window opened.");
});

窗口关闭事件​

通过监听 chrome.windows.onRemoved 事件来知道窗口关闭

chrome.windows.onRemoved.addListener(function(windowId) {
    console.log("Window with id " + windowId + " was closed.");
});

标签页打开事件​

通过监听 chrome.tabs.onCreated 事件来知道标签页打开。

chrome.tabs.onCreated.addListener(function(tab) {
    console.log("New tab created with id " + tab.id);
});

标签页关闭事件​

通过监听 chrome.tabs.onRemoved 事件来知道标签页关闭。

chrome.tabs.onRemoved.addListener(function(tabId, removeInfo) {
    console.log("Tab with id " + tabId + " is closing.");
});

标签页切换事件​

通过监听 chrome.tabs.onActivated 事件来知道标签页切换。

chrome.tabs.onActivated.addListener(function(activeInfo) {
    console.log("Tab with id " + activeInfo.tabId + " is now active.");
});

网页请求​

发送​

通过监听 chrome.webRequest.onBeforeRequest 事件来知道请求发送。

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        console.log("Request is about to be sent: ", details);
    },
    {urls: ["<all_urls>"]}
);

接收​

通过监听 chrome.webRequest.onCompleted 事件来知道响应接收。

chrome.webRequest.onCompleted.addListener(
    function(details) {
        console.log("Request completed: ", details);
    },
    {urls: ["<all_urls>"]}
);

错误​

通过监听 chrome.webRequest.onErrorOccurred 事件来知道连接错误。

chrome.webRequest.onErrorOccurred.addListener(
    function(details) {
        console.log("Error occurred while making request: ", details);
    },
    {urls: ["<all_urls>"]}
);

用户操作​

点击插件图标​

通过监听 chrome.actions.onClicked 事件来知道插件图标被点击。

chrome.actions.onClicked.addListener(function(tab) {
    console.log("Plugin icon clicked in tab with id " + tab.id + ".");
});

点击插件右键菜单​

首先需要创建菜单，然后通过监听 chrome.contextMenus.onClicked 事件来知道插件菜单被选择。

chrome.contextMenus.create({
    id: "sampleContextMenu",
    title: "Sample Context Menu",
    contexts: ["page"]
});
chrome.contextMenus.onClicked.addListener(function(info, tab) {
    if (info.menuItemId == "sampleContextMenu") {
        console.log("Sample Context Menu clicked.");
    }
});

使用快捷键​

快捷键需要在 manifest.json 文件中定义，然后通过监听 chrome.commands.onCommand 事件来知道快捷键被使用。

{
  "permissions": [
    "commands"
  ],
  "commands": {
    "toggle-feature-foo": {
      "suggested_key": {
        "default": "Ctrl+Shift+Y",
        "mac": "Command+Shift+Y"
      },
      "description": "Toggle feature foo"
    }
  }
}
chrome.commands.onCommand.addListener(function(command) {
    console.log('User triggered command: ' + command);
});