开发一个CSDN博客浏览器插件

基本效果

沉浸模式——隐藏掉两个边栏，

暗黑模式——无需解释

release地址：https://github.com/honwhy/csdn-copyer-release/releases/tag/0.0.1

原理解释

整体技术栈使用Vue3 + Vite + Typescript + element-plus。

使用popup

配置，

  permissions: ['tabs'],
  action: {
    default_popup: 'index.html',
  },

这个index.html引入了Vue，利用vue的onMounted开始判断当前浏览页面是否csdn博客地址，

function handleActiveTab() {
  chrome.tabs.query(
    {
      active: true,
      currentWindow: true,
    },
    (tabs) => {
      console.log('active tab', tabs[0])
      const tab = tabs[0]
      if (tab.url?.startsWith('https://blog.csdn.net')) {
        disabled.value = false
      } else {
        disabled.value = true
      }
    }
  )
}

如果不是则switch开关按钮置灰不给使用。这个switch使用element-plus的el-switch组件。

使用content_script

配置，

  content_scripts: [
    {
      js: ['./src/csdn.ts'],
      matches: ['https://blog.csdn.net/**'],
    },
  ],

popup和content_script之间通讯

popup询问是否已经设置过开关了，

function handleActiveTab() {
  chrome.tabs.query(
    {
      active: true,
      currentWindow: true,
    },
    (tabs) => {
      console.log('active tab', tabs[0])
      const tab = tabs[0]
      if (tab.url?.startsWith('https://blog.csdn.net')) {
        disabled.value = false
        // go query
        const msg = { action: 'query', value: true }
        chrome.tabs.sendMessage(tab.id!, msg, (response) => {
          console.log('got response', response)
          clean.value = response.clean
          dark.value = response.dark
        })
      } else {
        disabled.value = true
      }
    }
  )
}

这里使用的是chrome.tabs.sendMessage这个API，需要首先获取到活跃的浏览器tab。
content_script监听处理，

function setupListener() {
  chrome.runtime.onMessage.addListener(
    (msg: MyMessage, sender, sendResponse) => {
      console.log('request from ', sender, msg)
      handleMessage(msg).then(sendResponse)
      return true
    }
  )
}

事件处理

• 沉浸模式开关
• 暗黑模式开关

• 查询是否已经开启开关
  比如沉浸模式消息的处理，

  async function handleMessage(msg: MyMessage) {
  if (msg.action === 'clean') {
    onClean(msg.value)
    return 'true'
  } else if (msg.action === 'dark') {
    onDark(msg.value)
  } else if (msg.action === 'query') {
    return onQuery()
  }
  return 'false'
  }

  const HIDDEN_CLASS = 'tr-hidden' as const
  const currentClean = ref(false)
  function onClean(val: boolean) {
  currentClean.value = val
  const left = document.querySelector('aside')
  const right = document.querySelector('#rightAside')
  const boxes = document.querySelectorAll('.recommend-box')
  if (val) {
    left?.classList.add(HIDDEN_CLASS)
    right?.classList.add(HIDDEN_CLASS)
    boxes.forEach((it) => it.classList.add(HIDDEN_CLASS))
  } else {
    left?.classList.remove(HIDDEN_CLASS)
    right?.classList.remove(HIDDEN_CLASS)
    boxes.forEach((it) => it.classList.remove(HIDDEN_CLASS))
  }
  }

  通过HIDDEN_CLASS样式类来隐藏两个边栏，这里的CSS还可以使用过度动画，让隐藏不要那么生硬。

  .tr-hidden {
  /* display: none; */
  opacity: 0;
  transition: opacity 400ms 0ms;
  }
  

  附录

  release地址：https://github.com/honwhy/csdn-copyer-release/releases/tag/0.0.1