How To Execute Scripts On Background Page Of A Chrome Extension

Question

I am developing a Chrome extention. My manifest.json is:

"page_action": {
    "default_icon": {
        "19": "icons/icon19.png",
        "38": "icons/icon38.jpg"
    },
    "default_popup": "options.html"
},

In my extension I am trying to execute scripts which attempt to run/reach on actual web page:

// in options.html
chrome.tabs.executescript(null,{code:"alert('hello!');"}) ;

But Chrome extension debugger outputs this error:

Uncaught TypeError: Object #<Object> has no method 'executescript'

I want to reflect any changes on options to content_script or actual web page immidiately.

In page_action scope, how can I reach "chrome" object?

It realy depends on what you are doing but, but most of the time you should be able to use ContentScript developer.chrome.com/extensions/content_scripts.html It's a much better practice. — Paul Fournel
– Paul Fournel, Commented Feb 28, 2013 at 8:00

BeardFist · Accepted Answer · 2013-02-28 07:36:05Z

2

For now try changing executescript to executeScript the capital 'S' is important.

executeScript and insertCSS are mostly used to inject a js or css file into a given tab rather than the raw code. They are used when you want to inject that code in very specific situations. In your code you don't specify an id for what tab to inject the code into, so it just injects it in the given context. If you use a chrome.tabs.query like with the message passing, you should be able to inject the code into the actual tab.

It seems that you are trying to affect some sort of change on a given tab when you change options in a popup from a Page Action I personally would recommend using jQuery to make the actual changes while using the message passing from the other question to send a message to the given tab. You could try doing it with programmatic injection of css or Javascript, but successive changes in the options might have undesirable results.

I don't know the exact details of what kinds of changes you are trying to make. If they are purely css then you could have one stylesheet injected into the page and just toggle a class on the things you want to change and have a class for each scenario. If you describe what you are trying to do in more detail I could give a more detailed suggestion.

edited Feb 28, 2013 at 7:36

answered Feb 28, 2013 at 5:50

BeardFist

8,2013 gold badges38 silver badges41 bronze badges

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

3 Comments

Digerkam Over a year ago

I did, but it is never reaching the scope of actual web page, just running in extension sandbox.

BeardFist Over a year ago

@Digerkam I have updated my answer with some more info about executeScript

Digerkam Over a year ago

Think of page_action as a popup which shows extension option, what I accomplish here is reflect any option changes to actual web page directly. I solve my problems by your answers, thank you!

Collectives™ on Stack Overflow

How To Execute Scripts On Background Page Of A Chrome Extension

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related