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
  • 32,186
  • 68
  • 222
  • 392
Pengin
  • 731
  • 1
  • 10
  • 15
  • 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

You can also simply write in your content script:

location.href="javascript:greeting(); void 0";
check_ca
  • 1,611
  • 1
  • 12
  • 16
  • 2
    Simple, straight forward and no code injection overhead! Good one – mrmoje Aug 29 '13 at 08:44
  • Thanks, this is a very smart, elegant solution. – ibic Aug 08 '16 at 03:43
  • 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
    worked like a charm even in 2018.. :) this is one of the most clever js hacks i've ever seen.. good one buddy.. – Tolga Arican Feb 23 '18 at 09:15
  • 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
15

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,094
  • 5
  • 50
  • 76