WishMeLz

生活其实很有趣

浏览器插件开发及WXT开发使用笔记

本篇是 浏览器开发过程中遇到的问题笔记记录,以及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>"
        ],
    },
});