MV3 - inject javascript object into main world page ?

[Morten Overgaard]

We are about to develop an Extension where we have to inject an API (javascript object) into the Main world Page. The API needs to be attached to the main world window object and accessible like window.CCApi

We have been trying a lot of different approaches and actually got it working using MV2 - but we have to use MV3 where we cannot get things to work ?

So any hints/examples of how to accomplish this ?

To summarise

1) Main world page needs to get access to window.CCApi instance

2) window.CCApi wraps functionality that calls background (service worker) and popup (by using runtime.sendMessage ??)

Where and how to inject instance of CCApi??

BR Morten

[wOxxOm]

You can keep using the two MV2-compatible methods (a script exposed via web_accessible_resources and an inline event attribute) or use the new MV3 method: chrome.scripting.executeScript with world: 'MAIN'

[Morten Overgaard]

Hi w0xx0m

Thanks for the reply.

The following have been tried without any luck.

// background.js

async function getCurrentTab() : Promise<chrome.tabs.Tab> {

let queryOptions = { active: true, currentWindow: true };

let [tab] = await chrome.tabs.query(queryOptions);

return tab;

}

let currentTab = getCurrentTab().then(t=> {

console.log(t);

chrome.scripting.executeScript({

target: { tabId: t.id},

files : ["./extension/src/inject.js"],

world: "MAIN",

});});

// inject.js

window.ccApi = "Test";

this raises the following error in extension console 

Uncaught (in promise) Error: Cannot access a chrome:// URL

any hints ?

[Morten Overgaard]

Here is the manifest file:

{

"name": "ccTest",

"description": "cc",

"version": "0.0.1",

"manifest_version": 3,

"author": "x",

"content_scripts": [

{

"matches": ["https://developer.mozilla.org/*"],

"js": ["./extension/src/content.js"],

"run_at": "document_idle"

}

],

"host_permissions": ["<all_urls>"],

"permissions": ["tabs", "scripting", "notifications", "activeTab"],

"background": {

"service_worker": "./extension/src/background.js"

},

"web_accessible_resources": [

{

"resources": ["./extension/src/inject.js"],

"matches": ["<all_urls>"]

}

],

"action": {

"default_popup": "index.html"

}

}

[wOxxOm]

As the error message says you're trying to run this code on a chrome:// page, probably chrome://extensions page. You can't do it. If you need further assistance show us how/where you run your code in the background script.

[Morten Overgaard]

Your latest response somehow got me thinking - it's working now. It was all about me misunderstanding the lifecycle of the background script.

BR Morten