我喜欢在Chrome扩展中切换browserAction，这应该与制表符无关
这是代码
的manifest.json
{ "name": "Toggle", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2, "permissions": ["activeTab"], "icons": { "16": "images/hand16.png", "32": "images/hand32.png", "48": "images/hand48.png" }, "background": { "scripts": ["background.js"], "persistent": false }, "content_scripts": [ { "matches": [ "<all_urls>" ], "js": ["jquery.min.js","content.js"] } ], "browser_action": { "default_icon": "images/hand16.png", "default_title": "toggle" } }content.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if(request.message === "current-tab"){ console.log('activated'); chrome.runtime.sendMessage({"message": "set_active_icon"}); } if(request.message === "deactivate"){ console.log('deactivated'); chrome.runtime.sendMessage({"message": "set_default_icon"}); } });background.js
click=0; chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { if(click == 0){ chrome.tabs.sendMessage(tabs[0].id, {"message": "current-tab"}); click=1; } else{ chrome.tabs.sendMessage(tabs[0].id, {"message": "deactivate"}); click=0; } }); }); // Icon change chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if( request.message === "set_active_icon" ) { console.log('suces'); chrome.browserAction.setIcon({ path: "images/grab.png", tabId: sender.tab.id }); } else if (request.message === "set_default_icon") { chrome.browserAction.setIcon({ path: "images/hand16.png", tabId: sender.tab.id }); } });您可以注意到，单击图标时，控制台中会打印出“激活”并再次点击，您可以看到“已停用”的消息，但是当您在其他选项卡中重复相同的操作时，该脚本将在您停止前面的选项卡，但我需要它是独立的选项卡，我知道它是因为我声明为“单击”的全局变量，不知道如何以不同的方式来处理它，或者我缺少一些属性？ 我需要使用本地存储，如果是这样的话？
提前致谢
I like to toggle the browserAction in chrome extension which should be tab independent
Here is the code
Manifest.json
{ "name": "Toggle", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2, "permissions": ["activeTab"], "icons": { "16": "images/hand16.png", "32": "images/hand32.png", "48": "images/hand48.png" }, "background": { "scripts": ["background.js"], "persistent": false }, "content_scripts": [ { "matches": [ "<all_urls>" ], "js": ["jquery.min.js","content.js"] } ], "browser_action": { "default_icon": "images/hand16.png", "default_title": "toggle" } }content.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if(request.message === "current-tab"){ console.log('activated'); chrome.runtime.sendMessage({"message": "set_active_icon"}); } if(request.message === "deactivate"){ console.log('deactivated'); chrome.runtime.sendMessage({"message": "set_default_icon"}); } });background.js
click=0; chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { if(click == 0){ chrome.tabs.sendMessage(tabs[0].id, {"message": "current-tab"}); click=1; } else{ chrome.tabs.sendMessage(tabs[0].id, {"message": "deactivate"}); click=0; } }); }); // Icon change chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if( request.message === "set_active_icon" ) { console.log('suces'); chrome.browserAction.setIcon({ path: "images/grab.png", tabId: sender.tab.id }); } else if (request.message === "set_default_icon") { chrome.browserAction.setIcon({ path: "images/hand16.png", tabId: sender.tab.id }); } });you can notice that when the icon is clicked, "activated" is printed in the console and on clicking it again you can see "deactivated" message but when you repeat the same action in other tab, the script will work where you left off in the previous tab, but i need it to be independent of the tab and i know that its because of the global variable which i declared as "click" and not sure how to approach it in a different way or am i missing some property? Do i need to use local storage, if so how?
Thanks in advance
最满意答案
现在，它看起来像您正在全球跟踪click状态。 您需要为每个标签独立跟踪它。
您可以通过将该逻辑放入内容脚本来实现此目的。 让后台页面监听browserAction点击，然后向相关选项卡发送"toggle-tab"消息。 然后，该选项卡可以使用当前活动状态对消息进行响应，并且后台页面可以相应地设置图标。
另一个注意事项：您不必通过发送新消息来回复消息。 这就是addListener回调的sendResponse参数的用途。 chrome.tabs.sendMessage函数接受第三个参数，该参数是一个回调函数，用于接收传递给sendResponse的参数。 例如：
content.js
// Let each content script manage its own active state. let isActive = false; // When the background page sends a message telling this tab to toggle its // active state, do so, and then respond with the new active state. chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if(request.message === "toggle-tab") { isActive = !isActive; // toggle the active state sendResponse(isActive); // respond with the new active state } });background.js
// When the browserAction click occurs, tell the content script to // toggle its own active state. When the content script responds with // its new active state, set the right icon. chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.sendMessage(tab.id, {message: "toggle-tab"}, function(isActive) { setIcon(tab.id, isActive); }); }); // Set the right icon in the given tab id, depending on that tab's active state. function setIcon(tabId, isActive) { const path = isActive ? "images/grab.png" : "images/hand16.png"; chrome.browserAction.setIcon({ path, tabId }); }Right now, it looks like you're keeping track of the click state globally. You need to keep track of it for each tab independently.
You can accomplish this by putting that logic in the content script. Let the background page listen for browserAction clicks, then send a "toggle-tab" message to the relevant tab. Then, the tab can just respond to the message with its current active state, and the background page can set the icon accordingly.
Another note: you don't have to respond to a message by sending a new message. That's what the sendResponse parameter of the addListener callback is for. The chrome.tabs.sendMessage function takes a third parameter, which is a callback function that receives the arguments passed to sendResponse. For example:
content.js
// Let each content script manage its own active state. let isActive = false; // When the background page sends a message telling this tab to toggle its // active state, do so, and then respond with the new active state. chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if(request.message === "toggle-tab") { isActive = !isActive; // toggle the active state sendResponse(isActive); // respond with the new active state } });background.js
// When the browserAction click occurs, tell the content script to // toggle its own active state. When the content script responds with // its new active state, set the right icon. chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.sendMessage(tab.id, {message: "toggle-tab"}, function(isActive) { setIcon(tab.id, isActive); }); }); // Set the right icon in the given tab id, depending on that tab's active state. function setIcon(tabId, isActive) { const path = isActive ? "images/grab.png" : "images/hand16.png"; chrome.browserAction.setIcon({ path, tabId }); }更多推荐
发布评论