Claude给的答案：怎么用vue3+vite开发一个chrome插件

注意：这篇文章为作者提问claude.ai 的过程内容记录，实际测试需要修改

问：

用vue3+vite开发一个chrome插件，上面有按钮可以直接让当前浏览网页变暗50%。给出切实可行的步骤，不能省略中间说明。给出项目的所有代码

Claude回答：

好的,使用 Vue 3 + Vite 开发一个可以调节网页亮度的 Chrome 插件,详细步骤如下:

1. 使用 Vite 创建 Vue 项目

npm init vite@latest my-extension -- --template vue

1. 安装需要的依赖

npm install vue-router

1. 在根目录创建 manifest.json 文件,内容如下:

{
  "name": "Brightness Adjust",
  "version": "1.0.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["activeTab", "tabs"]
}

1. 在 vite.config.js 中添加针对插件打包的 Rollup 配置:

export default {
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }
    }
  }
}

1. 创建 src/background.js 文件,用于后台逻辑:

// 代码实现后面给出

1. 在 src/router 下配置路由组件:

// 路由配置代码后面给出

1. 在 src/App.vue 中实现调整亮度的 UI 和函数:

vue

Copy code

// 组件代码后面给出

1. 运行 npm run build 构建生产代码
2. 在 manifest.json 中添加构建输出的 js 和 css 文件:

{
  "background": {
   "service_worker": "assets/background.js"
  },
  
  "web_accessible_resources": ["assets/*.css"]
}

1. 加载插件文件夹,在 Chrome中测试

以上是使用 Vue 3 + Vite 开发 Chrome 插件的详细步骤。下面是各个代码文件的实现:

src/background.js

// 监听内容脚本消息
browser.runtime.onMessage.addListener((request) => {
  if (request.type === 'adjust') {
    browser.tabs.executeScript({
      code: `document.body.style.filter = 'brightness(${request.value})'`
    });
  }
});

src/router/index.js

js

Copy code

import { createRouter, createWebHashHistory } from 'vue-router';
import App from '../App.vue';

export default createRouter({
  history: createWebHashHistory(), 
  routes: [
    { path: '/', component: App }
  ] 
})

src/App.vue

<template>
  <button @click="adjust">Dim Page</button>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const adjust = () => {
      router.runtime.sendMessage({
        type: 'adjust',
        value: '50%'  
      });
    }

    return { adjust }
  }
}
</script>

以上就是使用 Vue 3 + Vite 开发 Chrome 插件的完整代码示例。

问：

上面的项目，npm run build之后，怎么在chrome里测试呢？给出具体的步骤，不能省略中间的说明

Claude答：

好的,对于使用 Vue 3 + Vite 开发的 Chrome 插件,npm run build 之后,想要在 Chrome 中加载和测试,具体步骤如下:

1. 运行构建命令

npm run build

这会在 dist 目录下生成插件需要的 js, css等静态资源文件。

1. 压缩 dist 和 public 目录

把 dist 和 public 目录里的文件全都压缩成一个 zip 文件,例如 dist.zip。

1. 在 Chrome 中打开扩展程序页面

浏览器地址栏输入 chrome://extensions 打开这个页面。

1. 开启开发者模式

点击页面右上角的“开发者模式”开关,启用开发者功能。

1. 加载已解压的扩展程序

点击“加载已解压的扩展程序”,然后选择刚才压缩的 dist.zip 文件。

1. 插件安装完成

这个时候 Chrome 会自动解压并加载这个插件,可以在扩展程序页面看到它已安装。

1. 打开网页测试

现在可以打开任意网页,看看插件的功能是否正常工作。

1. 调试代码

如果插件有问题,可以打开 devtools 对代码进行调试,找到错误原因。

1. 重新构建

调试修复后,需要重新运行构建命令生成代码,然后刷新插件。

以上就是 Vue + Vite 开发的 Chrome 插件,如何在本地 Chrome 中加载和测试的详细步骤。这样可以方便我们调试和完善插件功能。

实际测试

真的用chrome的插件功能去加载dist文件夹的时候，报错了。也就是，Claude给的答案也有很明显的缺陷。AI只能给我扩展一下思路，一些基础概念和原理还是要自己通过搜索引擎去找到人写的文章来阅读掌握。

尝试修改

在chrome插件官网看到官方的插件目录是这样 那么我们应该把manifest.json移到 dist文件夹下面。问下Claude怎么实现吧

（1）修改vite.config.js把manifest.json和background.js文件copy到dist目录

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import copy from 'rollup-plugin-copy'

// https://vitejs.dev/config/
export default defineConfig({
  build: {
     outDir: 'dist' ,
  },
  plugins: [
    copy({
      targets: [
        { src: 'src/background.js', dest: './dist' },
        { src: './manifest.json', dest: './dist' }
      ],
      hook: 'writeBundle',
    }),
    vue(),
  ],

})

重新加载插件，这次报了个新的错误

再问Claude

在chrome扩展中怎么让网页变暗， 给出具体代码

Claude回答

在 Chrome 扩展中可以通过注入页面来调整网页的亮度,使其变暗。具体代码如下:

在 background.js 中:

// 接收来自页面的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  // 消息类型为adjustPage
  if (request.type === 'adjustPage') {
    chrome.tabs.executeScript({
      code: 'document.body.style.filter = "brightness(50%)"'
    });
  }
});

然后在插件弹出页面中:

// 发送消息给background调整亮度 
chrome.runtime.sendMessage({type: 'adjustPage'});

这个代码的作用是:

1. background.js 通过 chrome.runtime.onMessage 监听消息。
2. 当接收到类型为 adjustPage 的消息时。
3. 通过 chrome.tabs.executeScript 向页面注入CSS代码,将页面调暗。
4. 插件页面通过sendMessage发送适当的消息。 这样就可以通过Chrome扩展自身的代码调整页面的样式了。 也可以根据需求,将brightness的值设定为其他数值,来实现不同程度的调暗效果。

那么把browser换成chrome，但后面又报了其它错误。看了Claude给的东西还是不能确保正确的

自己看说明来实现把

谷歌扩展官方文档 developer.chrome.com/docs/extens… 谷歌扩展示例代码 github.com/GoogleChrom…

最终实现，点击扩展图标后页面变暗 background.js页面

  function darkenPage() {
    document.body.style.backgroundColor = 'black';
    document.body.style.filter = 'brightness(0.5)';
  }
  
  chrome.action.onClicked.addListener((tab) => {
    if (!tab.url.includes('chrome://')) {
      chrome.scripting.executeScript({
        target: { tabId: tab.id },
        function: darkenPage
      });
    }
  });

{
    "manifest_version": 3,
    "name": "Logic.AI",
    "version": "1.0",
    "description": "Adjust page brightness",
    "action": {},   //这里响应点击声明
    "permissions": ["activeTab", "scripting"],
    "background": {
        "service_worker": "background.js"
    }
}

效果