Question

24

Chrome Extension js: Sharing functions between background.js and popup.js

rated 0 times [ 31] [ 7] / answers: 1 / hits: 8072 / 10 Years ago, sat, march 29, 2014, 12:00:00

Suppose I have a JavaScript function foo() which I want to execute in both the background and in popup.html.

For example: it is executed every hour in the background of my Chrome extension, but can also be activated by the user from the popup menu (popup.html) on a button click.

I currently have a global.js script which defines foo() and when I include calls to foo() in my popup.js document, they execute without issue. (If I include both scripts in popup.html)

However, when I try to access foo() inside background.js, the calls do not execute (even if global.js is included in the background manifest.json extension file:

background: {

    persistent: true,

    scripts: [background.js, global.js]

},

Is there a convenient way to share functions between background.js and popup.js (without copying the entire function into each)?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kenyamelinad

Add To Favorites

Follow

Total Points: 339

Total Questions: 85

Total Answers: 116

Location: Marshall Islands

Member since Sun, Aug 29, 2021

3 Years ago

kenyamelinad questions

1 Error occurred prerendering page /. Deployment Error Vercel | Next.js

Sun, Jan 16, 22, 00:00, 2 Years ago

1 React JS Unexpected reserved word 'await'

Wed, Sep 8, 21, 00:00, 3 Years ago

1 How to use Leaflet Routing Machine with React-Leaflet 3?

Sun, May 23, 21, 00:00, 3 Years ago

1 Material UI (Scrollspy) - React - use tabs to move through list and auto scroll to index

Sun, Sep 20, 20, 00:00, 4 Years ago

1 Vue.js error app' is assigned a value but never used no-unused-vars

Wed, Apr 15, 20, 00:00, 4 Years ago

View All

answered 10 Years ago seth · Accepted Answer

The background scripts are loaded in the order specified in the manifest file. Simply load the file with common code before your background script as follows:

background: {

    persistent: true,

    scripts: [global.js, background.js]

},

Instead of duplicating the code in the popup, you can also use chrome.extension.getBackgroundPage() from the popup to access functions/variables of the background page, e.g. chrome.extension.getBackgroundPage().myFunction();.