本篇是 浏览器开发过程中遇到的问题笔记记录,以及WXT开发的笔记
1、发送消息
页面有iframe
的情况下,sendMessage
的消息在 content
中监听会多次触发
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
console.log('来消息了:',message.type, Date.now());
if (message.type === EMessageType.POPUP_DISPATCH_MESSAGE_ACTION && window === window.top) {
handleStartScriptDistribution(message.data);
}
// sendResponse({ success: true, message: "消息已收到"});
return true;
});
2、content配置
很多变量是驼峰写法,但是在原生开发中是 _ 拼接 如何:all_frames
> allFrames
export default defineContentScript({
matches: ["<all_urls>"],
allFrames: true,
runAt: "document_end",
async main() {
console.log("内容脚本main函数已执行,URL:", window.location.href);
},
});
3、目录结构
尽量不要再 entrypoints
中修改任何文件夹,或者新增文件夹和文件
文件放在 entrypoints
平级即可,引入使用 @
一样可以使用
4、配置 less
import { defineConfig } from "wxt";
export default defineConfig({
modules: ["@wxt-dev/module-vue"],
vite: (env) => ({
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
}),
manifest: {
permissions: ["tabs", "activeTab"],
host_permissions: [
"<all_urls>"
],
},
});