Внедрить JS только на определенной вкладке в Chrome Extension

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

Проблема с первым вариантом заключается в том, что мне нужно нажимать каждый раз, когда я хочу ввести код, проблема со вторым вариантом заключается в том, что код вводится на ЛЮБУЮ вкладку, которая обновляется.

Я хочу, чтобы в первый раз мне нужно было щелкнуть, чтобы внедрить его, а затем я хочу, чтобы код вводился автоматически, только если обновленная вкладка совпадает с активной вкладкой, когда пользователь щелкает.

Это моя попытка (не работает):

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

Это все еще неправильный синтаксис для вызова функции. Вы смешиваете это с синтаксисом определения функции. В общем случае должно иметь следующую форму:

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 callback)