Google chrome extension 仅在Chrome扩展的特定选项卡上注入JS

对不起，对我的英语有好处

我正在创建我的第一个Chrome扩展，我只想在一个特定的选项卡上注入JS

这是我的manifest.json：

此外，我还有2个文件background.js和inject.js

Inject.js可以是我想要注入的任何东西，例如：

(function() {
    console.log('Live is good');
})();

我想我的问题是background.js文件。当用户单击扩展按钮时，我可以在background.js上使用以下代码在特定选项卡中手动注入inject.js文件：

此外，当用户更新刷新或更改选项卡的URL时，我可以使用background.js文件中的以下代码在inject.js上自动插入代码：

第一个选项的问题是每次我想要注入代码时都需要单击，第二个选项的问题是在任何更新的选项卡上注入代码

我想要的是，第一次，我需要点击注入它，然后我想要代码被自动注入，只有当更新的选项卡与用户点击时的活动选项卡相同时

这是我尝试不工作的原因：

// listen for our browerAction to be clicked
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.storage.sync.set({indexTabId: tab.id}, function() {
      console.log("The color is green.");
    });
});

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    // for the current tab, inject the "inject.js" file & execute it
    if ( chrome.storage.sync.get ( 'indexTabId', data ){
        if ( data.indexTabId == tab.id ) {
            chrome.tabs.executeScript(tab.ib, {
                file: 'inject.js'
            });
        }
    });
});

知道如何解决吗？

您没有正确调用chrome.storage.sync.get，导致语法错误

如果chrome.storage.sync.get'indexTabId'，则返回数据{ 如果data.indexTabId==tab.id{ chrome.tabs.executeScriptab.ib{ 文件：“inject.js” }; } }; 外部的如果没有多大意义；你的实际决策发生在内部，所以让我们抛开它：

chrome.storage.sync.get'indexTabId'，数据{ 如果data.indexTabId==tab.id{ chrome.tabs.executeScriptab.ib{ 文件：“inject.js” }; } } 这仍然不是调用函数的正确语法。你把它和定义函数的语法混在一起了。一般而言，以下形式：

chrome.storage.sync.get查询、回调； 但您可以将回调定义为匿名函数，如下所示：

函数项{/*代码*/} 甚至像这样，以ES6的方式：

items=>{/*代码*/} 那么，让我们把这些结合起来：

chrome.storage.sync.get'indexTabId'，函数数据{ 如果data.indexTabId==tab.id{ chrome.tabs.executeScriptab.ib{ 文件：“inject.js” }; } };

---

现在应该可以在chrome.tabs.onUpdated.addListener回调中使用了，问题是如果data.indexTabId==tab.id，那么tab.id在该行中不存在{应该是这样的；您可以从ONUpdate获得它。但是您也可以直接使用tabId。我的代码仍然应该被包装在chrome.tabs.onUpdate.addListenerWell中，包装可以工作。谢谢更新答案，如果您希望，无论如何，将其作为正确的解决方案。非常感谢。好的，添加了一个注释。作为一般建议，请找一个代码编辑器或者可以分析JavaScript代码的插件。通过静态分析/linting捕获这些类型的错误非常有用。

chrome.browserAction.onClicked.addListener(function (tab) {
    // for the current tab, inject the "inject.js" file & execute it
    chrome.tabs.executeScript(tab.ib, {
        file: 'inject.js'
    });
});

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    // for the current tab, inject the "inject.js" file & execute it
    chrome.tabs.executeScript(tab.ib, {
        file: 'inject.js'
    });
});

// listen for our browerAction to be clicked
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.storage.sync.set({indexTabId: tab.id}, function() {
      console.log("The color is green.");
    });
});

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    // for the current tab, inject the "inject.js" file & execute it
    if ( chrome.storage.sync.get ( 'indexTabId', data ){
        if ( data.indexTabId == tab.id ) {
            chrome.tabs.executeScript(tab.ib, {
                file: 'inject.js'
            });
        }
    });
});