chrome extension insert content script on browser action

Question

I am trying to make basically an element highlighter chrome extension. Workflow: - click on browser icon - click on the page - hightlight the element clicked

I am having troubles in running content scripts upon browser action using manifest_version:2 When I inspect the popup that appears it says:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:" (popup.html:5).

Which is where the inline script in popup.html is and the script does not work

I have:

manifest.json:

{
   "browser_action": {
      "default_icon": "images/icon.gif",
      "default_popup": "popup.html"
   },
   "manifest_version": 2,
   "description": "MEH!",
   "name": "My First Extension",
   "permissions": [
      "tabs", "http://*/*", "https://*/*"
   ],
   "version": "0.1"
}

popup.html:

<html>
  <head>
  </head>
  <body>
    <script>
      chrome.tabs.executeScript(null,{
        code:"document.body.style.backgroundColor='red'"
      });
    </script>
    <div id='msg' style="width:300px">...</div>
  </body>
</html>

Any help would be very much appreciated

Possible duplicate of [The Chrome extension popup is not working, click events are not handled](http://stackoverflow.com/questions/17601615/the-chrome-extension-popup-is-not-working-click-events-are-not-handled) — Makyen, Nov 29 '16 at 00:39

score 45 · Accepted Answer · edited Aug 07 '12 at 12:15

45

Turns out I could not read the error properly until I saw it in here

Apparently manifest v2 does not allow you to have inline scripts, so you just need to

src="path_to_the_file.js"

edited Aug 07 '12 at 12:15

Sathyajith Bhat

21,321
22
95
134

answered Jul 18 '12 at 16:17

Stefan

3,962
4
34
39

3

For those who still don't get the answer, see http://stackoverflow.com/a/17612988/938089 – Rob W Jul 15 '13 at 09:19
1

Where are you putting src? This answer is not clear. – Doug Feb 13 '14 at 07:03
inside the body. So instead of inserting a you would insert a script that points to a file, aka inside the page's HTML (like inside the HEAD or what-not) – Stefan Aug 28 '14 at 10:45

score 1 · Answer 2 · answered Aug 28 '14 at 10:22

In extension to @tak3r's answer and @Doug's comment:

Inline scripts need to be changed to external scripts.

Move:

<script>
  chrome.tabs.executeScript(null,{
    code:"document.body.style.backgroundColor='red'"
  });
</script>

To a new file called main.js and remove the <script></script> tags

Include the following in the <head></head> of your HTML

<script type="text/javascript" src="main.js"></script>

chrome extension insert content script on browser action

2 Answers2

Linked