javascript - 用于加载页面并注入(inject)代码的 Chrome 扩展

Question

我正在尝试创建一个简单的扩展，它将加载给定页面并在页面加载后注入(inject)代码。

我想出了以下内容，我这样做的方法正确吗？

背景.js

    chrome.tabs.getCurrent(function (tab) {
      chrome.tabs.update(tab.id, {url: "http://www.EXAMPLE.COM"});
    });

    chrome.tabs.onUpdated.addListener(function(tabId , info) {
        if (info.status == "complete") {
                 chrome.tabs.executeScript(null, {file: "content_script.js"});
        }
    });

Answer 1

引用chrome.tabs documentation对于chrome.tabs.getCurrent:

Gets the tab that this script call is being made from. May be undefined if called from a non-tab context (for example: a background page or popup view).

要获取当前事件的选项卡，您应该使用 chrome.tabs.query:

chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
  // Do something with tabs[0]
});

或者，如果您对用户输入使用react，例如单击浏览器操作，则已经为您提供了当前选项卡:

chrome.browserAction.onClicked.addListener(function(tab){
  // "tab" is the current active tab
});

<小时/>

您可以简单地创建一个新选项卡(当然，这取决于您想要实现的目标)，而不是抓取已打开的选项卡:

chrome.tabs.create({url: "http://www.EXAMPLE.COM"});

<小时/>

每当任何选项卡(而不仅仅是您创建的选项卡)完成加载时，您的监听器都会尝试将内容脚本注入(inject)当前选项卡(您使用了 null)。从 create/update 回调中执行此操作更安全，即

chrome.tabs.update(tab.id, {url: "http://www.EXAMPLE.COM"}, function(tab){
  chrome.tabs.executeScript(tab.id, {file: "content_script.js"});
});

注意:您不必担心此时页面尚未完成加载。 executeScript 遵循 run_at parameter ，默认为“加载 DOM 后的某个时间”。