以編程方式在擴展程序上注入內容腳本（Chrome擴展程序）

Question

我正在創建一個我希望能夠啟用/禁用的Chrome擴展程序。 我已經成功制作了一個彈出窗口，可以做到這一點。 問題是，如果我重新加載擴展（或者如果用戶最初下載了該擴展），則我的內容腳本默認為關閉。 我可以只將內容腳本注入manifest.json中，但這會導致為任何新選項卡注入內容腳本，這是我不想要的。 行為應該是，如果您下載/重新加載該擴展程序，則默認情況下它處於打開狀態，但是您可以啟用/禁用它，並且該擴展名適用於每個新選項卡。 我嘗試將初始化放在background.js中，但顯然在啟動時未調用該初始化。

manifest.json

{
  "manifest_version": 2,
  "name": "Rotten Tomatoes Search",
  "description": "This extension searches rotten tomatoes with highlighted text",
  "version": "1.0",
  "browser_action": {
    "default_icon": "./icons/icon_on.png",
    "default_popup": "popup.html"
  },
  "permissions": [
      "activeTab",
      "<all_urls>",
      "background"
  ],
   "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "content_scripts": [{
     "js": ["jquery-1.12.3.min.js"], 
     "matches": ["<all_urls>"]
   }]
}

background.js

var isExtensionOn = true;
chrome.tabs.executeScript({code: "console.log('backgournd hit...')"});

turnItOn();

chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) {
    if (request.cmd == "setOnOffState") {
        isExtensionOn = request.data.value;
    }

    if (request.cmd == "getOnOffState") {
        sendResponse(isExtensionOn);
    }
});

function turnItOn() {
    chrome.browserAction.setIcon({path: "./icons/icon_on.png"});
    chrome.tabs.executeScript({file:"openTooltipMenu.js"});
    //$('#toggle').text('disable');
}

popup.js

document.addEventListener('DOMContentLoaded', function() {
// show different text depending on on/off state (for icon, handled by having default icon)
 chrome.extension.sendMessage({ cmd: "getOnOffState" }, function(currentState){
    if (currentState) $('#toggle').text('disable');
    else $('#toggle').text('enable');
 });
// allow user to toggle state of extension
var toggle = document.getElementById('toggle')
toggle.addEventListener('click', function() {
    //chrome.tabs.executeScript({code: "console.log('toggled...')"});
    chrome.extension.sendMessage({ cmd: "getOnOffState" }, function(currentState){
        var newState = !currentState;
        // toggle to the new state in background
        chrome.extension.sendMessage({ cmd: "setOnOffState", data: { value: newState } }, function(){
            // after toggling, do stuff based on new state
            if (newState) turnOn();
            else turnOff();
        });
    });
})
});

function turnOn() {
    chrome.browserAction.setIcon({path: "./icons/icon_on.png"});
    chrome.tabs.executeScript({file:"openTooltipMenu.js"});
    $('#toggle').text('disable');
}

function turnOff() {
    chrome.browserAction.setIcon({path: "./icons/icon_off.png"});
    chrome.tabs.executeScript({code: "$('body').off();"});
    $('#toggle').text('enable');
}

popup.html

<some code>
    <script src="./jquery-1.12.3.min.js"></script>
    <script src="./popup.js"></script><style type="text/css"></style>
  </head>
  <body>
    <div class="popupMenu" style="list-style-type:none">
      <div class="header">Rotten Tomatoes Search</div>
      <hr>
      <div class="menuEntry" id="toggle"></div>
    </div>
  </body>
</html>

Answer 1

我已經解決了這個問題。 我的架構方法是錯誤的。 一個人應該全局注入content_script，但要檢查腳本是否應該執行某些操作。 更清楚地說，在腳本中從后台頁面獲取狀態並基於此進行操作。 以前，我只是在加載彈出窗口后或初始化背景時才注入腳本。 此外，必須在所有窗口中的所有選項卡之間循環，以更新所有選項卡中的狀態（如果那是人們想要的）。

以編程方式在擴展程序上注入內容腳本（Chrome擴展程序）

問題描述

1 個解決方案

解決方案1
0 2016-05-25 01:06:25

以編程方式在擴展程序上注入內容腳本（Chrome擴展程序）

問題描述

1 個解決方案

解決方案1 0 2016-05-25 01:06:25

解決方案1
0 2016-05-25 01:06:25