🧩 Plasmo Developers•4mo ago

Registering a content message from a library

I want to create a HTTP library for plasmohq, that I can easily include in my extensions, how do I register a background message class from a library?

8 Replies

mov ecx, 420OP•4mo ago

Arcane•4mo ago

@mov ecx, 420 has reached level 1. GG!

mov ecx, 420OP•4mo ago

Avi•3mo ago

Why not just use Fetch? Often it's better to just use the native solution, this way if you get an error the call stack is clear

mov ecx, 420OP•3mo ago

I want to reuse the same fetch in many libs. Im making a license provider I dont want to add a background script and dupe code every extension I make

Avi•3mo ago

So you have two choices: seek a module in NPM or make one yourself It's good to package your Fetch call in a function but sometimes it's better to duplicate the code so it's easier to debug

mov ecx, 420OP•3mo ago

Yeah I wanna make one my self, my question is how do I register a background script from an external module. Because the background scripts need to be in a folder called backgrounds and then I would need to create these for all projects still

Avi•3mo ago

Let me introduce a slight correction: Chrome's MV3 only allows you to define a single script as the background script Plasmo lets you import the rest of the scripts directly or indirectly Directly:

// some-script.ts
export function someFunc() {...}

// some-script.ts
export function someFunc() {...}

// background.ts
import { someFunc } from "~scripts/some-script";

// background.ts
import { someFunc } from "~scripts/some-script";

Indirectly:

// webworker.ts
function someWork() {...}
someWork();

// webworker.ts
function someWork() {...}
someWork();

// background.ts
import pathWorker from "url:~webworker.ts";

const worker = new Worker(pathWorker);
worker.addEventListener("message", () => {...});
worker.postMessage(...);

// background.ts
import pathWorker from "url:~webworker.ts";

const worker = new Worker(pathWorker);
worker.addEventListener("message", () => {...});
worker.postMessage(...);

<!-- offscreen.html -->
<script src="offscreen.ts" type="module"></script>

<!-- offscreen.html -->
<script src="offscreen.ts" type="module"></script>

// offscreen.ts
chrome.runtime.onConnect.addListener(async port => {
  // ...
});

// offscreen.ts
chrome.runtime.onConnect.addListener(async port => {
  // ...
});

// background.ts
import pathOffset from "raw:~offscreen.html";

// register OffscreenDocument

// background.ts
import pathOffset from "raw:~offscreen.html";

// register OffscreenDocument

by "directly" it's like with normal TypeScript where it just copies the function snippets into your script by "indirectly" you're creating a separated script and the concept can be used regardless of Plasmo

Gaming

Programming

Registering a content message from a library