Execute web page js from chrome extension content script

Question

I have this js function in my web page html code.

function update() {
    document.getElementById( "textbox ").value = updatetext;
}

When I execute "update()" from chrome console, it works.
But if I execute from chrome extension,

chrome.tabs.executeScript(tab.id, {code: "update();"}, function(result){});

It says update is not defined. But if I replace with "alert('ok')", It works.
Then I execute

eval("update()")

in Chrome extension content script. It also says "update is not defined."

So what can i do to call js function on web page?

possible duplicate of [Building a Chrome Extension - Inject code in a page using a Content script](http://stackoverflow.com/questions/9515704/building-a-chrome-extension-inject-code-in-a-page-using-a-content-script) — Xan, Dec 12 '14 at 10:52
Or even better with regards to your questions in comments: [Executing code at page-level from Background.js and returning the value](http://stackoverflow.com/questions/26140443/executing-code-at-page-level-from-background-js-and-returning-the-value/26141393) — Xan, Dec 12 '14 at 10:53

KAdot · Accepted Answer · 2017-01-02T02:56:16.870

7

Chrome executes content scripts in a sandbox, so you need to inject an inline script to interact with the webpage:

var injectedCode = 'update()';
var script = document.createElement('script');
script.appendChild(document.createTextNode('('+ injectedCode +')();'));
(document.body || document.head || document.documentElement).appendChild(script);

edited Jan 02 '17 at 02:56

answered Mar 20 '13 at 08:46

KAdot

1,997
13
21

1

thanks, if i want to execute a js function with return value? how can i get the return value? @KAdot – Leslie Wu Mar 20 '13 at 09:32
You can store return value as a member of hidden DOM element, then read it from content script. – KAdot Mar 20 '13 at 09:35
1

Can you post a code example? i tried document.documentElement.setAttribute(), but it can only set String value, does not work on js object. Is there some way to return a js object? @KAdot – Leslie Wu Mar 20 '13 at 10:22
You can use JSON.stringify to return object. – KAdot Mar 20 '13 at 11:08
1

But if I want to pass an DOM element, how to achieve this?@KAdot – Leslie Wu Mar 21 '13 at 05:49
It's impossibe because of sandbox. – KAdot Mar 21 '13 at 05:54

Execute web page js from chrome extension content script

1 Answers1