Chrome.tabs.executeScript(); + .addEventListener("点击", ...);通过 chrome 扩展将代码注入活动网页答案

【问题标题】：Chrome.tabs.executeScript(); + .addEventListener("click", ...); to inject code into active webpage through chrome extensionChrome.tabs.executeScript(); + .addEventListener("点击", ...);通过 chrome 扩展将代码注入活动网页
【发布时间】：2018-11-21 01:16:32
【问题描述】：

我正在尝试制作一个 chrome 扩展，通过 popup.html 文件将代码注入活动网页...

popup.html >

<!DOCTYPE html>
<html>
    <body>
        <button id="Mr_Button-Click_Extend">hello this is a test</button>
    </body>
</html>
<script>
document.getElementById("Mr_Button-Click_Extend").addEventListener("click", TheGreatEmbed() 
{
chrome.tabs.executeScript(null, {file: 'js/inject.js'});
});
</script>

js/inject.js >

document.write('<h1 style="position: fixed; top: 200; left: 200; z-index: 999999;">testing... testing...</h1>');

清单 >

{
"name": "GAME HUB.io copy",

"version": "0.0.1",
"manifest_version": 2,
"description": "YEET",


"homepage_url": "https://www.youtube.com/channel/UCbmPRCzP88oaId-4piz5Weg",

"icons": {
    "128": "icons/Icon-128.png"
},
    "default_locale": "en",

    "browser_action": {
    "default_icon": "icons/Icon-128.png",
    "default_title": "GAME HUB.io TEST MESSAGES",   
    "default_popup": "src/html/popup.html"
},
"permissions": [
    "activeTab",
    "http://*/*",
"https://*/*",
"<all_urls>",
    "webRequest"
]
}

这个问题已被简化，以便于理解... 由于@Drapaster 对旧问题的回答，已尝试解决其他更复杂的问题。

上面的代码示例只是我正在努力完成的基本功能。

问题是为什么这不起作用？我在这里想念什么？我是否需要将脚本标签中的内容移动到一个名为例如 popup-helper.js 的新文件中？修改清单？或者是别的什么？请帮忙...

【问题讨论】：

onClick within Chrome Extension not working的可能重复

标签： javascript html google-chrome-extension extension-methods addeventlistener

【解决方案1】：

根据https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution chrome 扩展对使用内联javascript代码有限制，例如：

onclick="..."

但是

chrome.tabs.executeScript(null, {file: 'js/inject.js'});

看起来不错。

尝试以这种方式附加点击事件：

document.getElementById("someH2Id...").addEventListener("click", function()
{
    chrome.tabs.executeScript(null, {file: 'js/inject.js'});
});

【讨论】：

嗯...似乎不起作用...<!DOCTYPE html> <html> <body> <button id="Mr_Button-Click_Extend">hello this is a test</button> </body> </html> <script> document.getElementById("Mr_Button-Click_Extend").addEventListener("click", TheGreatEmbed() { chrome.tabs.executeScript(null, {file: 'js/inject.js'}); }); </script>我错过了什么吗？
试试这个代码：<!DOCTYPE html> <html> <body> <button id="Mr_Button-Click_Extend">hello this is a test</button> <script> document.getElementById("Mr_Button-Click_Extend").addEventListener("click", 函数 () { chrome.tabs.executeScript(null, {file: 'js/inject.js'}); }); </script> </body> </html>
嗯.. 很奇怪，这对你有用吗？所有必要的文件（图标除外）都包含在上面，只需按照清单和其他文件中列出的目录...因为这对我不起作用...
LOL 原来我所需要的只是将脚本标签放在正文标签的 END 而不是头部或 START 的身体标签...您的解决方案对我有用...有时编程会让我对这样的事情感到恼火 - 事情很简单，他们应该很容易看到，但由于某种原因不是，而且你的整个事情都没有因为那个微小的错误而无法工作。很高兴我让它工作了......（就像一个月前一样：D）