Question

抱歉，我的英语不好。

我正在创建我的第一个Chrome扩展程序，并且只想在特定标签上注入JS。

这是我的manifest.json：

{
  "name": "My Extension Name",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "My description",
  "homepage_url": "http://example.com",
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": true
  },
  "browser_action": {
    "default_title": "Inject!"
  },
  "permissions": [
    "https://*/*",
    "http://*/*",
    "tabs",
    "storage"
  ]
}

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

Inject.js可以成为我想注入的东西，例如：

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

我认为我的问题与background.js文件有关。当用户单击扩展名按钮上的inject.js上的以下代码时，我可以手动将background.js文件注入特定的选项卡中：

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'
    });
});

此外，当用户使用inject.js文件中的以下代码更新（刷新或更改URL）选项卡时，我可以自动将代码插入background.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'
    });
});

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

我想要的是第一时间，只有在用户单击时更新的选项卡与活动选项卡所在的位置相同时，我才需要单击以注入代码，然后希望自动注入代码。

这是我的尝试（不起作用）：

// 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'
            });
        }
    });
});

有什么办法解决吗？

Answer 1

您未正确调用chrome.storage.sync.get，直到出现语法错误。

if ( chrome.storage.sync.get ( 'indexTabId', data ){
    if ( data.indexTabId == tab.id ) {
        chrome.tabs.executeScript(tab.ib, {
            file: 'inject.js'
        });
    }
});

外部if没有多大意义；您的实际决策是在内部进行的，所以我们把它排除在外：

chrome.storage.sync.get ( 'indexTabId', data ){
    if ( data.indexTabId == tab.id ) {
        chrome.tabs.executeScript(tab.ib, {
            file: 'inject.js'
        });
    }
}

对于调用函数，这仍然不是正确的语法。您将其与定义函数的语法混合在一起。通常，it should have的格式如下：

chrome.storage.sync.get ( query, callback );

但是您可以在此处将回调定义为匿名函数，如下所示：

function ( items ) { /* code */ }

甚至是这样，以ES6方式：

( items ) => { /* code */ }

所以，让我们结合一下：

chrome.storage.sync.get ( 'indexTabId', function ( data ) {
    if ( data.indexTabId == tab.id ) {
        chrome.tabs.executeScript(tab.ib, {
            file: 'inject.js'
        });
    }
});

现在应该可以工作了（放入chrome.tabs.onUpdated.addListener回调中）

仅在Chrome扩展程序的特定标签上注入JS

1 个答案: