我正在为Google Chrome编写扩展程序，当用户单击加载项图标时，我正尝试在当前页面中添加内容。Chrome扩展程序：添加内容（启用/禁用图标）
我想增加可能性来启用/禁用扩展，并显示/隐藏我注入的每个页面的内容。
manifest.json的
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"css": ["css/style.css"],
"js": [
"js/content.js"
]
}
]
我不知道如何只为图标已点击因为该页面添加内容，每一页有脚本。
我也尝试了一些没有成功的背景脚本。
你有什么想法吗？
谢谢！
你应该做到这一点，使用chrome.tabs.executeScript和chrome.tabs.insertCSS。完整的示例：
Background.js
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.insertCSS(tab.id, {file: "content_style.css"});
chrome.tabs.executeScript(tab.id, {file: "content_script.js"});
});
的manifest.json
{
"name": "Inject js and CSS",
"version": "1",
"manifest_version": 2,
"browser_action": {
"default_icon": {
"16": "icon16.png",
"19": "icon19.png",
"32": "icon32.png",
"38": "icon38.png"
}
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": [
"activeTab"
]
}
编辑：更新使用activeTab，活动页面和新的图标大小。
您对此有何看法？
manifest.json的
{
"manifest_version": 2,
"name": "Extension",
"description": "My extension",
"version": "0.1",
"icons": {
"16": "icons/icon_16.png",
"48": "icons/icon_48.png",
"128": "icons/icon_128.png"
},
"browser_action": {
"default_title": "Extension",
"default_icon": "icons/icon_16_disabled.png"
},
"background": {
"scripts": ["js/background.js"],
"persistent": true
},
"permissions": [
"activeTab",
"tabs"
]
}
background.js
var activedTab = {};
var injectedTab = {};
chrome.browserAction.onClicked.addListener(function(tab) {
if (typeof activedTab[tab.id] === 'undefined') {
activedTab[tab.id] = true;
chrome.tabs.insertCSS(tab.id, {file: 'style.css'});
chrome.tabs.executeScript(tab.id, {file: 'js/content.js'});
chrome.browserAction.setIcon({path: 'icons/icon_16.png'});
} else if (activedTab[tab.id]) {
activedTab[tab.id] = false;
chrome.browserAction.setIcon({path: 'icons/icon_16_disabled.png'});
if (injectedTab[tab.id]) {
chrome.tabs.sendMessage(tab.id, {greeting: 'hide'});
}
} else {
activedTab[tab.id] = true;
chrome.browserAction.setIcon({path: 'icons/icon_16.png'});
if (injectedTab[tab.id]) {
chrome.tabs.sendMessage(tab.id, {greeting: 'show'});
}
}
});
chrome.runtime.onMessage.addListener(function(request, sender) {
switch (request.greeting) {
case 'content_injected':
injectedTab[sender.tab.id] = true;
if (activedTab[sender.tab.id] == false) {
chrome.tabs.sendMessage(sender.tab.id, {greeting: 'hide'});
}
break;
}
});
chrome.tabs.onUpdated.addListener(function(tabId) {
delete activedTab[tabId];
chrome.browserAction.setIcon({path: 'icons/icon_16_disabled.png'});
});
chrome.tabs.onActiveChanged.addListener(function(tabId) {
if (activedTab[tabId]) {
chrome.browserAction.setIcon({path: 'icons/icon_16.png'});
} else {
chrome.browserAction.setIcon({path: 'icons/icon_16_disabled.png'});
}
});
content.js
console.log('loaded');
chrome.extension.sendMessage({greeting: 'content_injected'});
chrome.runtime.onMessage.addListener(function(request) {
switch (request.greeting) {
case 'show':
console.log('show');
break;
case 'hide':
console.log('hide');
break;
}
});
我所建造的同˚F为我的镀铬扩展提供了一个特征。 （谷歌搜索时来解决这个:)这么多的名字），这将创建一个ON/OFF开关/切换 我用下面的方法应用和内容的脚本之间的按摩：
清单
将所有的页面（hover.js）我的内容脚本和运行我extention脚本（background.js）
....
"browser_action": {
"default_icon": {
"19": "icons/icon-active.png"
}
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["css/hover.css"],
"js": ["js/hover.js"]
}
],
"background" : { "scripts": ["js/background.js"] },
....
背景。JS
在这里，我们prepering后台脚本（这在所有Chrome窗口运行）来发送和收到extention状态
// start extention as active
var status = true;
// set toggle of extention on browser action click and notify content script
chrome.browserAction.onClicked.addListener(function(tabs) {
if (status == 'true'){
status = false;
chrome.browserAction.setIcon({path: "icons/16x16.png"});
}
else{
status = true;
chrome.browserAction.setIcon({path: "icons/icon-active.png"});
}
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {status: status});
});
});
// check status on tab update and notify content script
chrome.tabs.onActivated.addListener(function() {
if (status == 'true'){
chrome.browserAction.setIcon({path: "icons/icon-active.png"});
}
else{
chrome.browserAction.setIcon({path: "icons/16x16.png"});
}
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {status: status});
});
});
//send extention status on request
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.status == "getStatus")
sendResponse({status: status});
});
正如你可以看到有3个功能：
更改浏览器操作按钮单击的状态。
当您移动到不同的选项卡并通知内容脚本时（每个选项卡具有内容脚本的自己“实例”，因此在一个选项卡中禁用可能仍然在另一选项卡中处于活动状态）时，请检查状态。
根据内容脚本的请求发送状态响应。
内容脚本
// check extention status
chrome.runtime.sendMessage({status: "getStatus"}, function(response) {
if (response.status == 'true'){
// check elements mouse is hover
document.addEventListener("mouseover", setLink, true);
}
else{
document.removeEventListener("mouseover", setLink, true);
}
});
// wait for massage from background script
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.status == 'true'){
// check elements mouse is hover
document.addEventListener("mouseover", setLink, true);
}
else{
document.removeEventListener("mouseover", setLink, true);
}
});
每个内容的脚本应首先通过发送按摩到后台脚本检查进一步扩展的地位和收到的状态更新。另外，如果我们在一个选项卡中关闭扩展，当我们更改选项卡时，我们将通知更改的内容脚本。
我敢肯定，这可以在脚本方面来更好的做，但我希望这将有助于...
被添加到页面的图标，或者你的意思是你看到的扩展图标在浏览器工具栏中？ – Archer
我想到了浏览器工具栏。 – vermotr
然后，您需要随时包含脚本，但只有在单击按钮时才调用您想要运行的任何功能。你不会有条件地包括一些东西 - 你总是包括它。 – Archer