2016-05-25 23 views
0

有効/無効にしたいクロム拡張機能を作成しています。私は正常にポップアップを作成しました。問題は、エクステンションをリロードした場合(またはユーザーが最初にダウンロードした場合)、コンテンツスクリプトはデフォルトでオフになることです。私はマニフェストにコンテンツスクリプトを挿入することができます.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> 
+0

「chrome.storage」を使用して永続データを保存することを検討する必要があります。https://developer.chrome.com/extensions/storage –

+0

@RobM。、ありがとうございますが、これは私の問題を解決しますか? background.jsにない場合はどこで初期化スクリプトを実行できますか? – joshlevy89

答えて

0

私は問題を理解しました。私の建築的アプローチは間違っていた。 content_scriptをグローバルに注入する必要があるかどうかはスクリプトで確認する必要があります。より明確にするために、スクリプトでは、バックグラウンドページからステータスを取得し、それに基づいて何かを行います。以前は、ポップアップがロードされた後、またはバックグラウンドが初期化されたときに初めてスクリプトを挿入していました。さらに、すべてのタブの状態を更新するには、すべてのウィンドウのすべてのタブをループする必要があります(必要な場合)。

+0

タブがある間に拡張機能が(再)読み込まれたときにスクリプトがどうなるかを説明する[この回答](http://stackoverflow.com/a/23895822/934239)もご覧ください。開いた。 – Xan

関連する問題