-
|
Hi, I am following the example for active tab content script: Here's my background.ts: import readabilityCSS from "./style.css?inline";
console.log("in background.ts"); // <------------ This is never called
export default defineBackground({
type: "module", // <------------- I've added this, but it doesn't reflect in manifest.json
main() {
(browser.action ?? browser.browserAction).onClicked.addListener(
async (tab) => {
console.log("Action clicked", tab);
if (tab.id && tab.url) {
const [injectionResult] = await browser.scripting.executeScript({
target: { tabId: tab.id },
files: ["/content-scripts/content.js"],
});
const data = injectionResult.result as {
title: string;
byline?: string;
excerpt?: string;
content: string;
};
const html = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>${data.title}</title>
<style>${readabilityCSS}</style>
</head>
<body>
<h1>${data.title}</h1>
${data.byline ? `<p><em>${data.byline}</em></p>` : ""}
${data.excerpt ? `<p>${data.excerpt}</p>` : ""}
${data.content}
</body>
</html>`;
browser.tabs
.create({
url: "data:text/html;charset=utf-8," + encodeURIComponent(html),
})
.catch((err) => {
console.error("Error creating tab:", err);
});
}
}
);
},
});And here's content.ts: import { Readability } from "@mozilla/readability";
export default defineContentScript({
// Set "registration" to runtime so this file isn't listed in manifest
registration: "runtime",
// Use an empty array for matches to prevent any host_permissions be added
// when using `registration: "runtime"`.
matches: [],
async main(ctx) {
console.log("Content script executed!");
const documentClone = document.cloneNode(true) as Document;
const article = new Readability(documentClone).parse();
if (article) {
return {
title: article.title,
content: article.content,
};
}
},
});I've noticed that the manifest automatically created does not contain the {
"manifest_version": 3,
"name": "word-wise",
"description": "Click to activate",
"version": "0.0.0",
"icons": {
"16": "icon/16.png",
"32": "icon/32.png",
"48": "icon/48.png",
"96": "icon/96.png",
"128": "icon/128.png"
},
"permissions": [
"activeTab",
"scripting",
"tabs"
],
"action": {},
"commands": {
"wxt:reload-extension": {
"description": "Reload the extension during development",
"suggested_key": {
"default": "Alt+R"
}
}
},
"background": {
"service_worker": "background.js"
},
"options_ui": {
"page": "options.html"
},
"host_permissions": [
"http://localhost/*"
],
"content_security_policy": {
"extension_pages": "script-src 'self' 'wasm-unsafe-eval' http://localhost:3000; object-src 'self';",
"sandbox": "script-src 'self' 'unsafe-inline' 'unsafe-eval' http://localhost:3000; sandbox allow-scripts allow-forms allow-popups allow-modals; child-src 'self';"
}
}Example file by WXT works perfectly fine. Here's my folder structure: |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Allowed filenames are listed here: https://wxt.dev/guide/essentials/entrypoints.html#background Also mentioned on that page:
To go into more depth about how WXT works: if you build for production, you would notice that your extension doesn't have a background script at all. During development, if WXT doesn't find a background script, it adds one with the basic code required for reloading when a file is saved. This is the background script you're seeing in the output directory. |
Beta Was this translation helpful? Give feedback.
-
|
Right! I was actually aware of the docs but I missed renaming it after moving files around. Thank you for your support! |
Beta Was this translation helpful? Give feedback.
entrypoints/background/background.tsis not the correct filepath for a background script. Rename the file toentrypoints/background/index.ts.Allowed filenames are listed here: https://wxt.dev/guide/essentials/entrypoints.html#background
Also mentioned on that page:
To go into more depth about how WXT works: if you build for production, you would notice that your extension doesn't have a background script at all. During development, if WXT doesn't find a background script, it adds one with the basic code required for reloading wh…