前端实习突然要写个插件，chrome极简上手插件需求，简单的方便大家上手。（chrome插件），写插件所需文件，写插件所

实习突然来了个插件需求，研究总结了一下，可以简单的方便大家上手。（chrome插件）

首先了解一下简单的写一个插件的所需要的文件，以及每个文件是干什么的。从我的理解它跟vue有点相像的，当然插件也可以用到vue文件写，把所需要的文件配置进去（大家有兴趣可以研究研究）

一个插件所需要的文件

manifest.json文件：插件的配置文件，用于向浏览器提供相关的基本信息，按我的理解就是告诉浏览器，我操控页面的文件是谁，我的插件名字是什么之类的

配置项	作用
name	插件名称
version	版本号
manifest_version	遵循的版本规范（现在是3版本,2版本已经不能使用了）
permissions	声明插件需要的权限(比如要获取本地token，就加`storage`字段)
description	插件的简短描述
content_scripts	注入到网页中的脚本，内部可以配置哪个网址会触发的字段，以及这个脚本文件在文件夹什么位置 (简单理解：当你插件安装后，进入到一个页面，就会自动执行这个文件)(不配置这个选项，也有手动注入这个文件的方式)(这个文件可以去操作页面)
background	后台脚本可以在浏览器后台持续运行，用于处理一些全局的任务（有一种全局组件的意思，一个脚本打开多个网页，会有多个content文件，而只有一个background，有点像pinia，vuex功能的感觉）
action	当我们点击插件，在插件出出现的小页面，如果我们需要一个插件的页面的话（比如我要是想通过插件进行一些复杂操作，而插件只有一个图标，可以设置这个文件，通过点击插件按钮，出现一个页面，用这个页面与其他脚本交互）【这里需要注意，有一个api`chrome.Action.onClicked`是点击插件图标的事件绑定，如果有这个action配置的页面，点击插件的事件绑定api会失效】

简单的实现一个插件

实践是最快能够理解的方法，我们写一个简单插件来理解一下。

功能就是；进入一个页面，获取到localstorage的token，点击插件，打开一个小窗口，显示出这个token。可以对这个token进行修改。

manifest配置文件

{
  "name": "获取当前页面token的插件",
  "version": "1.0",
  "description": "当前插件可获取本地token",
  "manifest_version": 3,
  "permissions": [
    // 获取当前页面网址的权限是哪些
      "activeTab",
       "storage"
  ],
  "action": {
    // 点击图标弹出的页面
      "default_popup": "popup.html",
      "default_icon":"icon.png"
  },
  "background": {
    // 后台脚本地址
    "service_worker": "background.js"
},
"content_scripts": [
    {
        // matches: 匹配所有页面 （可以写入可以匹配的页面地址）
        "matches": ["<all_urls>"],
        "js": ["content.js"]
    }
]
}

popup.html (js文件要和html文件分开)

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Token Viewer</title>
  <style>
    body {
        height: 200px;
      width: 300px;
      padding: 10px;
      font-family: Arial, sans-serif;
    }
    #token {
      word-wrap: break-word;
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
  <h3>获取当前页面的 Token</h3>
  <div>token:</div>
  <div style="margin-left: 10px;font-size: 15px;color: blueviolet;" id="token">Loading...</div>
  <input type="text" id="tokenInput" placeholder="输入需要修改的token">
  <!-- <button id="reload">Reload chromeAPI Token</button> -->
  <button id="send">Reload LocalStorage Token</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js

因为content.js一进入页面会执行，所以会在内容脚本获取后发给popup，但是我试了几个通信会报错（content -> popup文件通信）所以直接存在了chrome的扩展api，chrome.storage里面，然后popup去获取【由此实现，进入到一个页面后，token就被保存到chrome.storage中】

当点击插件图标，popup页面显示，通过document.addEventListener('DOMContentLoaded', () => {})是在 HTML 文档被完全加载和解析完成后触发，来实现，点击后去自动获取chrome里面存的token显示出来

获取输入框dom，按钮绑定提交，通过chrome的api对content.js通信，（要注意有些通信方式是有顺序的，不能反过来使用，我报错了很多次），告诉content.js去修改本地的token，popup文件无法对页面进行操作

document.addEventListener('DOMContentLoaded', () => {
  // 获取 token ，写入dom 显示
  const tokenElement = document.getElementById('token');
  chrome.storage.local.get('token', (result) => {
    if (result.token) {
      tokenElement.textContent = result.token;
    } else {
      tokenElement.textContent = 'No token found.';
    }
  });

// 绑定 send 发送事件 获取 input 输入的修改
const tokenInput = document.getElementById('tokenInput');
 const send = document.getElementById('send');

send.addEventListener('click',function(){
  // 获取当前选项卡ID的api
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    if (tabs.length > 0) {
        // 向内容脚本content.js发送消息(携带了id，发送的数据，内容脚本接受到后返回的数据)【具体可以看官方文档】
        chrome.tabs.sendMessage(tabs[0].id, { action: 'changeLocalstorage',token:tokenInput.value }, (response) => {
          if (chrome.runtime.lastError) {
            console.error("修改失败:", chrome.runtime.lastError);
          } else {
            chrome.storage.local.set({ token: response.token }, function() {
              tokenElement.textContent = `本地同时修改${response.token}`;  // 更新显示的内容
          });
            console.log('修改成功:', response);
          }
        });
        
    }
  });
})
});

content.js

localStorage.getItem('token')本地token获取

chrome.runtime.onMessage.addListener去接收信息，页面一进入，content文件会执行，此时这个api就会等待接收

console.log('content.js')
function getTokenFromLocalStorage() {
    const token = localStorage.getItem('token'); // 假设存储的 key 为 'token'
    console.log('token',token)

    if (token) {
      chrome.storage.local.set({ token: token }, () => {
        console.log(token);
      });
    } else {
      chrome.storage.local.set({ token: '' }, () => {
        console.log(token);
      });
      console.log('No token found in localStorage');
    }
  }
getTokenFromLocalStorage()


console.log("准备接收消息...");
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log("收到消息:", message);
  // 判断是要修稿本地token 的 action
  if (message.action === 'changeLocalstorage') {
    localStorage.setItem('token',message.token);
    const token = localStorage.getItem('token');
    // 成功回调
    sendResponse({ success: true,token:token });
  }
});

安装插件测试使用

在chrome里，打开插件管理，打开开发者模式，点击加载已解压的扩展程序选择我们的文件（manifest配置文件要在根目录）即可

数据准备

进入到一个页面

3.点击插件图标

4.进行修改