30

I'm now making a Chrome Extension. I want to call JS functions that are defined in the original page (tab), from Chrome Extension. It doesn't matter whether background.html or Content_Script calls them.

For example:

Original page (tab)

<html>
<head>
<title>Original Page</title>
<script>
function greeting(){
    alert("Ohayou!");
    // some other codes here
}
</script>
</head>
<body></body>
</html>

Then I want to call the function "greeting" in the original page, from Google Extensions. How can I do the above?

Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
Pengin
  • 771
  • 1
  • 10
  • 16
  • 3
    You have to inject code into the original page. Rob W has explained it very well over here: [**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/9517879#9517879) – dan-lee Nov 08 '12 at 14:14
  • Thank you. So one thing I can do is to inject a code that is called from Chrome Extensions and that calls a function in original page. I mean Chrome Extension --> injected code in the original page --> original function in the original page My understanding is correct?? – Pengin Nov 08 '12 at 15:48
  • Because the answer is a bit longer than this fields allows, I wrote a reply to your question. – dan-lee Nov 08 '12 at 16:15

2 Answers2

34

Edit: This solution is obsolete since Manifest V3 (i.e. January 2022 in Chromium-based browsers) which prevents executing arbitrary (e.g. insecure) JavaScript in a page.

You can also simply write in your content script:

location.href="javascript:greeting(); void 0";
check_ca
  • 1,716
  • 1
  • 12
  • 17
  • 5
    Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. – GorvGoyl Feb 16 '18 at 13:52
  • 1
    I get that this works. I don't get why this works. location.href is the link of the origin, setting it equal to that string or `javascript:Whatever-Function-You-Want-To-Call-On-Your-Page();` opens that function call in a VM in debugger and executes the local code. I see that's what happens, but how? Why? Why does this work??? – Callat Sep 10 '18 at 18:56
  • won't work with Manifest 3 – user924 Jul 10 '22 at 09:50
16

For the first part you can use this nice answer: Insert code into the page context using a content script.

To call a function back in your content script is easy. You can create your own event which you can then listen on in your content script. This would work like this:

injected code:

var evt = document.createEvent('Event');
evt.initEvent('myCustomEvent', true, false);

// fire the event
document.dispatchEvent(evt);

contentscript:

document.addEventListener('myCustomEvent', function() {
  // do whatever is necessary
});
Community
  • 1
  • 1
dan-lee
  • 14,365
  • 5
  • 52
  • 77