Inject and Run the script to webpage from chrome extension

[Ali Raza]

Hello team.
We are working on our extension's migration from MV2 to MV3.

In MV2, we were injecting a script in all related webpages as

```

const scriptString = 'function runAtStart () { console.log('our code...'); }';

const script = document.createElement('script'); 

script.textContent = `Our code here.....`

(document.body || document.head || document.documentElement).appendChild(script);

```

According to MV3 policy, we can only inject script tags with src attributes.

```

const s = document.createElement('script');

s.setAttribute('src', 'chrome-extension://<id_of_the_extension>/js/payload.js');

document.documentElement.appendChild(s);

```

Also I have tried this via
*chrome.scripting.registerContentScript*

. and now it is shown to the webpage, but unfortunately it is not calling the methods which I have written into it.
```

await chrome.scripting.registerContentScripts([

{

  id: `tabId-${tab.id}`,

  matches: ['https://*/*'],

  js: ['js/payload.js'],

  runAt: 'document_end',

  world: 'MAIN',

}], (e) => console.log(e));
```

And in the payload.js file, I have just written 
``` console.log("TEST"); ```

In both scenarios, it is adding script tag with src in webpage DOM but not executing it.
Is there anything I am missing.
Below are the screenshots of webpage behaviour.

[Ali Raza]

[Stefan Van Damme]

Hi there,

If you want the resource file to be accessed by web pages, add web_accessible_resources in your manifest file:

https://developer.chrome.com/docs/extensions/mv3/manifest/web_accessible_resources/#manifest-declaration

Other suggestion:

Have you tried this example, where you can place your JavaScript code in the "changeBackgroundColor()" function:

const color = "blue"
function changeBackgroundColor() {
     document.body.style.backgroundColor = color;

     console.log("hello");
}
const tabId = getTabId();
chrome.scripting.executeScript(
{
     target: {tabId: tabId},
     func: changeBackgroundColor,
},
() => { ... });

Source: https://developer.chrome.com/docs/extensions/reference/scripting/#:~:text=%23-,Runtime%20functions,-When%20injecting%20JavaScript

Thanks,

Stefan vd

[Ali Raza]

Thanks a lot, Stefan vd

It is working fine with your suggested method `executeScript`.
Now my actual task is to add a new property in window object i.e. window.peerConnection.

I am adding it through payload.js file and printing out it. It prints the value but in the console tab when I type window.peerConnection, it shows undefined.

Can you please help me out here as well.
Below are the attached screenshots for better understanding and demo.

[Stefan Van Damme]

Hi there,

It is great to hear that my suggestion works for you.

I was researching your issue about "undefined," and found a Chrome bug report about that too:

https://bugs.chromium.org/p/chromium/issues/detail?id=1207214

Thanks,

Stefan vd