注意：这篇文章为作者发问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只能给我扩展一下思路，一些根底概念和原理还是要自己经过搜索引擎去找到人写的文章来阅读把握。

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

测验修正

在chrome插件官网看到官方的插件目录是这样

Claude给的答案：怎么用vue3+vite开发一个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给的答案：怎么用vue3+vite开发一个chrome插件

Claude给的答案：怎么用vue3+vite开发一个chrome插件
再问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"
    }
}

作用

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