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

Question

我正在尝试制作一个 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？修改清单？或者是别的什么？请帮忙...

Answer 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'});
});

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

Chrome.tabs.executeScript(); + .addEventListener("click", ...); to inject code into active webpage through chrome extension

html

javascript

extension-methods

addeventlistener

google-chrome-extension