有没有办法在单击扩展程序的图标时添加HTML

Question

事实上，

我想写一个小的chrome扩展，给我窗口的尺寸。

所以我决定在单击扩展程序的图标时使用注入到网页中的 HTML 代码

我尝试了很多东西，但它不起作用(注入的 html 没有出现(

这是我目前manifest.json：

{
"name": "Dimension",
"version": "1.0",
"description": "Giving you the window dimensions live!",
"permissions": [
"tabs", "<all_urls>"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["dimension.css"],
"js": ["inject.js"]
}
],
"web_accessible_resources": ["dimension.html", "dimension.css", "dimension.js"],
"browser_action": {},
"manifest_version": 2
}

inject.js文件：

console.log("inject script loaded")
chrome.browserAction.onClicked.addListener(inject)
function inject() {
var iFrame  = document.createElement ("iframe");
iFrame.src  = chrome.extension.getURL ("dimension.html");
document.body.insertBefore (iFrame, document.body.firstChild);
console.log('html injected')
}

我也尝试inject.js作为后台脚本，但它正在将 html 文件打开到扩展后台环境中(当您检查后台脚本时(

Answer 1

使用内置的 devtools 检查和调试代码。它应该显示有关 chrome.browserAction 未定义的错误。此 API 不能在内容脚本中使用：大多数扩展 API 侦听器都需要后台脚本。

要访问网页，您需要一个内容脚本，但无需声明它，只需使用编程注入，也不需要这些权限。在这种情况下，单个activeTab就足够了。

manifest.json

{
"name": "Dimension",
"version": "1.0",
"description": "Giving you the window dimensions live!",
"permissions": ["activeTab"],
"web_accessible_resources": ["dimension.*"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {},
"manifest_version": 2
}

背景.js

chrome.browserAction.onClicked.addListener(tab => {
chrome.tabs.executeScript(tab.id, {file: 'inject.js'});
});

在 inject.js 文件中将 chrome.browserAction 行替换为inject();