Google extensions: How to run a function in my javascript file when button is pressed in the popup?

Question

I'm working on a google extension where I want to change the background-color of youtube.com by pressing a button in my popup.html and then running my function.

Here is my code:

The JavaScript file ms.js:

function color1(){
document.getElementById("body-container").style.backgroundColor="blue";}

The HTML popup.html file:

<!DOCTYPE html>
<html>
<head>
<script src="ms.js">
</script>
</head>
<body>
<p> TEST </p>
<input type="button" value="blue" id="btn1" onclick="color1"/>
</body>
</html>

Here is my manifest.json file:

{

"name": "my extension test",

"version": "1.0",

"permissions": [
    "activeTab",
    "pageCapture"
],

"manifest_version": 2,

"description": "Test extension :D",

"browser_action": {
"default_icon": "ikon.png",
"default_popup": "popup.html"
},

"web_accessible_resources": [
"script/ms.js"
],

"content_scripts": [
    {
      "matches": ["https://www.youtube.com/*"],
      "js": ["ms.js"]
    }
  ]

}

Check this SO question if it can help you :)

KENdi
– KENdi

2016-04-29 03:35:43 +00:00
Commented Apr 29, 2016 at 3:35 — KENdi
– KENdi, Commented Apr 29, 2016 at 3:35

Haibara Ai · Accepted Answer · 2016-05-03 09:28:00Z

1

Updated

Content Scripts(injected through manifest.json) is not needed, so we remove content_scripts part
We decide to use Programming injection, the only needed permission is activeTab, so we remove activeTab and pageCapture. If you want your scripts to be executed in background tab(not active tab), then you could replace activeTab permission with host permission.
Web Accessible Resources is supposed to be used when we expect some resources to be used in the context of a web page, content scripts themselves don't need to be whitelisted, so we remove web_accessible_resources part
JavaScript is executed when it's found in the document, if you include it inside <head> tag, the <body> is not constructed then you could find the element, so we put that in the bottom of <body>
Inline Scripts won't be executed by default, so we move this event binding logic to external scripts.

Take a look at chrome.tabs.executeScript, for such minor feature, you could inject JavaScript code into a page.

manifest.json

{
    "name": "my extension test",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Test extension :D",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "permissions": [
        "activeTab"
    ]
}

popup.html

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <p> TEST </p>
    <input type="button" value="blue" id="btn1" />
    <script src="ms.js">

    </script>
</body>

</html>

ms.js

document.getElementById("btn1").addEventListener("click", function() {
    chrome.tabs.executeScript({"code": 'document.getElementById("body-container").style.backgroundColor = "blue";'});
}, false);

edited May 3, 2016 at 9:28

answered May 3, 2016 at 8:50

Haibara Ai

10.9k2 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Xan Over a year ago

Code dump correcting multiple errors/misconceptions, but no explanation.

Xan Over a year ago

I disagree with replacing "activeTab" with a host permission, but at least it's now a valuable answer.

Haibara Ai Over a year ago

@Xan, provided more info about activeTab and host permissions.

Collectives™ on Stack Overflow

Google extensions: How to run a function in my javascript file when button is pressed in the popup?

1 Answer 1

Updated

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Updated

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related