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

Question

I am trying to make a chrome extension that injects code into the active webpage through the popup.html file...

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

manifest >

{
"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"
]
}

This question has been simplified to make it easier to understand... This attempt at solving the other more complicated question has been tried due to @Drapaster 's answer to the older question.

The code examples above are just the basic functionality that I am striving to accomplish.

The question is why didn't this work? What am I missing here? Do I need to move the content from the script tags to a new file named for example: popup-helper.js? Modify the manifest? Or is it something else? Please help...

Possible duplicate of [onClick within Chrome Extension not working](https://stackoverflow.com/questions/13591983/onclick-within-chrome-extension-not-working) — wOxxOm, Jun 12 '18 at 05:13

score 0 · Accepted Answer · answered Jun 11 '18 at 21:56

0

In accordings with https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution chrome extensions has restriction for using inline javascript code like:

onclick="..."

but

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

looks right.

Try to attach click event in this manner:

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

answered Jun 11 '18 at 21:56

Drapaster

91
4

hmm... doesn't seem to work... ` ` Am I missing something? – 255.tar.xz Jun 13 '18 at 23:26
Try this code: ` ` – Drapaster Jun 14 '18 at 13:35
Hmm.. Weird, does this work for you? all files necessary (except for the icons) are included above, just follow the directories listed in manifest and other files... Because this doesn't work for me... – 255.tar.xz Jun 15 '18 at 02:58
LOL Turns out all I needed was to put the script tag at the **END** of the body tag instead of the head or the **START** of the body tag... Your solution works for me... Sometimes programming annoys me with things like that - things that are just SOO simple that they should've been easy to see but for some reason weren't and your whole thing doesn't work because of that tiny little error. Well glad I got it working... (worked it out like a month ago :D) – 255.tar.xz Oct 22 '18 at 04:04

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

1 Answers1