前言

最近对各种网站灰白调调的背景色感到十分不满，于是打开f12往body上加了background-color，调式的过程中感觉各种色彩真的很戳我心，但是f12的一刷新就无了，思来想去写一个插件来满足我吧！先看看两张效果图

如何实现

浏览器插件能够往网页里注入js脚本通过js修改dom上body的css样式，通过localstorage存储修改颜色

目录创建

• html
• img
• js
• manifest.json(插件配置文件)

manifest.json配置

manifest.json是插件的配置文件

{
  "manifest_version": 3,//2版本已逐步淘汰
  "name": "插件名字",
  "version": "1.0.0",
  "description": "插件描述",
  "author": "作者",
  "icons": {
    "16": "img/16icon.png",
    "48": "img/48icon.png",
    "128": "img/128icon.png"
  },
  "action": {
  //该配置项指定插件在浏览器右上角点击显示的小页面
    "default_icon": "img/16icon.png",
    "default_title": "title",
    "default_popup": "html/action.html"
  },

  "content_scripts": [
  //往网页注入的js
    {
      "js": [
        "js/content_script.js"
      ],
      "matches": [
 //匹配url的规则
        "<all_urls>"
      ]
    }
  ],
  "permissions": [
  // 插件可获取的浏览器权限
    "tabs"
  ],
  "host_permissions": [
  // 可获取权限的url
    "<all_urls>"
  ]
}
复制代码

action编写

简单的编写了一个html页面，如图

在action.js里我们监听到修改的点击

// 修改点击
submitElm.addEventListener('click', () => {
  chrome.tabs.query(
    {
      active: true,
      currentWindow: true
    },
    (tabs) => {
    //拿到当前的标签页，向注入的content.js发送选择的颜色
      chrome.tabs.sendMessage(tabs[0].id, { bgColor: resultColor })
    }
  )
})
复制代码

content.js

在注入的js中，我们先初始化一下背景颜色，如果localstorage存储了背景色，则初始化为先前设置的背景色

const bodyElm = document.querySelector('body')
const defaultBgColor = localStorage.getItem('bgColor') || ''

const setBgColor = (color) => {
  localStorage.setItem('bgColor',color)
  bodyElm.style.background = color
}
setBgColor(defaultBgColor)
复制代码

同时我们监听action发送过来的消息

chrome.runtime.onMessage.addListener(function (request, sender, callback) {
  setBgColor(request.bgColor)
})
复制代码

小结

插件的学习还是十分碰壁的找不到好的教学资源，都是一点点啃出来，还是十分开心的，虽然是个很简单的小玩意，最后附上源码。==拖了半个多月的文章今天终于写完，新年快乐~