Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to call functions in the original page(tab) in Chrome Extensions

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?

like image 382
Pengin Avatar asked Nov 08 '12 14:11

Pengin


People also ask

How do you call Chrome extensions?

From Chrome, navigate to Settings > Extensions > Dialpad Extension > Details. Select Extension Options > Use this Dialpad app to place all calls:. You can choose the desktop app, the Chrome app, or the web app. It will then serve as your default choice for placing calls using the click-to-call feature from Chrome.

What is unpacked extension in Chrome?

Chrome extensions can be either packed or unpacked. Packed extensions are a single file with a . crx extension. Unpacked extensions are a directory containing the extension, including a manifest.

What is Chrome background script extension?

The background script should be viewed as "running in the background of the Chrome browser". Your desired effect (running a script for every page) is actually a task for content scripts. To learn more, read https://developer.chrome.com/extensions/overview.html#arch. Follow this answer to receive notifications.

How do I show extensions in Chrome toolbar?

To manage which extensions are pinned to your toolbar, open the Extensions Menu by clicking the puzzle piece icon next to your profile avatar. A drop-down menu will open, showing all of your currently installed Chrome extensions.

How do I run a function on a Chrome extension page?

In chrome extensions, the code in run in a sandboxed environment, so any event listeners won't apply to the main page. From my understanding, you want a button click to trigger and run a function on the web page. The best way to do this would be to inject code into the page.

How do I use tabs in Chrome extensions?

You can use most chrome.tabs methods and events without declaring any permissions in the extension's manifest file. However, if you require access to the url, pendingUrl, title, or favIconUrl properties of tabs.Tab, you must declare the "tabs" permission in the manifest, as shown below: ... ...

How do injected scripts work with Chrome extensions?

This in turn provides the injected script access to the local variables and functions. Since Chrome extensions are event-driven because of their architecture, once the injected scripts have access to the page's variables and functions, they can pass it to the content script. The content script then passes the these objects to the background page.

What is an extension in chrome?

The concept was originally introduced with the initial launch of Chrome, providing isolation for browser tabs. An extension may run in a web page with code similar to the example below. alert(greeting + button.person_name + ".")


2 Answers

You can also simply write in your content script:

location.href="javascript:greeting(); void 0"; 
like image 96
check_ca Avatar answered Sep 24 '22 11:09

check_ca


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 }); 
like image 41
dan-lee Avatar answered Sep 24 '22 11:09

dan-lee