Using npm MV3 version with your own background.js

[bbest31]

The current examples in documentation and this repository aren't every helpful in the sense that they use an imported background.js.

Most extensions will be making use of this script and therefore can't set the service worker to be @inboxsdk/core/background.js in the webpack configuration file.

I had to do the following just to make this sdk realistically usable:

1. Add the following code snippet to my chrome.runtime.onMessage.addListener conditional tree

if (request.type === 'inboxsdk__injectPageWorld' && sender.tab) {
    if (chrome.scripting) {
      // MV3
      chrome.scripting.executeScript({
        target: { tabId: sender.tab.id },
        world: 'MAIN',
        files: ['pageWorld.js'],
      });
      sendResponse(true);
    } else {
      // MV2 fallback. Tell content script it needs to figure things out.
      sendResponse(false);
    }
  } 

2. Add the pageWorld.js file to my entry list in the webpack file.

  entry: {
    popup: PATHS.src + '/popup.jsx',
    background: PATHS.src + '/background.js',
    contentScript: PATHS.src + '/contentScript.js',
    pageWorld: '@inboxsdk/core/pageWorld.js',
  },

The documentation and/or example needs to be updated to show these extra steps if the package can't be improved to not need them.

[aleemstreak]

We’d be happy to accept a PR with better example documentation!

…

On Thu, Apr 13, 2023 at 7:04 PM Brandon Best ***@***.***> wrote: The current examples in documentation and this repository aren't every helpful in the sense that they use an imported background.js. Most extensions will be making use of this script and therefore can't set the service worker to be @inboxsdk/core/background.js in the webpack configuration file. I had to do the following just to make this sdk realistically usable: 1. Add the following code snippet to my chrome.runtime.onMessage.addListener conditional tree if (request.type === 'inboxsdk__injectPageWorld' && sender.tab) { if (chrome.scripting) { // MV3 chrome.scripting.executeScript({ target: { tabId: sender.tab.id }, world: 'MAIN', files: ['pageWorld.js'], }); sendResponse(true); } else { // MV2 fallback. Tell content script it needs to figure things out. sendResponse(false); } } 1. Add the pageWorld.js file to my entry list in the webpack file. entry: { popup: PATHS.src + '/popup.jsx', background: PATHS.src + '/background.js', contentScript: PATHS.src + '/contentScript.js', pageWorld: ***@***.***/core/pageWorld.js', }, The documentation and/or example needs to be updated to show these extra steps if the package can't be improved to not need them. — Reply to this email directly, view it on GitHub <#10>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKBLT72BJOMELTT52KPN7TXBCWDFANCNFSM6AAAAAAW52JZNA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[wegry]

@bbest31 If you're bundling your background.js already, you might just try

// background.js
import '@inboxsdk/core/background.js';

at the top of your background.js.