PD
🧩 Plasmo DevelopersErskine Williams

Loading a content script on a specific tab

Howdy folks, I'm wanting to explicitly load a content script on a specific tab, so it doesn't interfere with other tabs. I have this working outside of Plasmo using the following: await chrome.scripting.executeScript({ target: { tabId: tabID }, files: ["myContentScript.js"], }); But I'm having difficulty getting plasmo to compile myContentScript.ts to myContentScript.js such that the extension can load it at runtime. When I put myContentScript.ts at the root of the project, it doesn't seem to get compiled at all, so after reading this page https://docs.plasmo.com/framework/content-scripts#adding-multiple-content-scripts, I created a contents/ folder to house this script, but it gets compiled to myContentScript.632856eb.js, and so the above code can't find the file to inject. It appears as though the framework assumes all scripts will run wherever the url matches, but I want to inject it only on a specific tab. Any thoughts?
Plasmo Docs
Content Scripts – Plasmo
How to use Plasmo content scripts to inject custom behavior into web pages
Rob
Rob•21d ago
In my BGSW, I did this: 
import contentTs from "url:~contents/content.ts";

const getFilenameFromImport = (fullFileName: string) => {
    const split = fullFileName.split("/").pop();
    if (split === undefined)
        throw new Error(
            `Issue parsing filename in background.ts: ${fullFileName}`
        );
    const filename = split.split("?")[0];
    return filename;
};

const contentTsFilename = getFilenameFromImport(contentTs);
import contentTs from "url:~contents/content.ts";

const getFilenameFromImport = (fullFileName: string) => {
    const split = fullFileName.split("/").pop();
    if (split === undefined)
        throw new Error(
            `Issue parsing filename in background.ts: ${fullFileName}`
        );
    const filename = split.split("?")[0];
    return filename;
};

const contentTsFilename = getFilenameFromImport(contentTs);
Then I passed contentTsFilename to chrome.scripting.executeScript. As far as I know, there isn't a more "official" way of doing this
Erskine Williams
Erskine Williams•20d ago
Yikes! Ok, I'm very grateful for your response. I will give it a go. This did the trick! Thanks for the assist!
Rob
Rob•20d ago
No problem!
Want results from more Discord servers?
Add your server
More Posts
anyone using authjs with plasmoIf yes, how did you go about this?Help: chrome.scripting.executeScript executes only onceHey guys, I need help with the below code. I have created a popup with a button that calls the belowWeb Workerhey im working with a web worker and it seems to be huge in dev but much smaller in the prod build. Certainly! To bundle a resource withCertainly! To bundle a resource with Plasmo, you can utilize tools like Webpack or Parcel to packageIntegrating Web Authentication with Plasmo ExtensionI'm new to Plasmo and currently working on creating a Vue extension. My web application utilizes CleUsing Stripe and setup an API inside the extensionHello ! I am able to make queries to stripe using what was explained on the website : https://docError with messagingHey, im trying to send a message from a content script in the main world to the background. For thatIssue with using Radix Components with extension and framework```ts Warning: Invalid hook call. Hooks can only be called inside of the body of a function componenHey all. Anyone know how to inject styles as a .css file to some webpage?im rewriting some extension since we are going to mv3, also i decieded to use Plasmo framework for tHow to inject React component on page?Hi I want to render an icon next to a div on the webpage and when that icon is clicked I want to ren