动态设置icon

background.ts → background/index.ts

@@ -1,6 +1,8 @@
 export {}
 
-chrome.runtime.onInstalled.addListener(function (object) {
+import "@plasmohq/messaging/background"
+
+chrome.runtime.onInstalled.addListener(function(object) {
   if (object.reason === chrome.runtime.OnInstalledReason.INSTALL) {
     chrome.tabs.create({ url: chrome.runtime.getURL("options.html") })
   }

background/messages/icon.ts

@@ -0,0 +1,19 @@
+import type { PlasmoMessaging } from "@plasmohq/messaging"
+import activeUrl from "raw:~/assets/logo.png"
+import defaultUrl from "raw:~/assets/icon.png"
+
+const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
+  const { active } = req.body
+
+  if (active) {
+    chrome.action.setIcon({ path: activeUrl }, () => {
+      console.log("set icon activeUrl")
+    })
+  } else {
+    chrome.action.setIcon({ path: defaultUrl }, () => {
+      console.log("set icon defaultUrl")
+    })
+  }
+}
+
+export default handler

background/messages/ping.ts

@@ -0,0 +1,11 @@
+import type { PlasmoMessaging } from "@plasmohq/messaging"
+
+const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
+  // const message = await querySomeApi(req.body.id)
+  //
+  // res.send({
+  //   message
+  // })
+}
+
+export default handler

component/content.tsx

@@ -68,7 +68,7 @@ export default function Content() {
   return (
     <>
       {items.map((item, index) => (
-        item.isShow ? itemMap[item.value] : <></>
+        item.isShow ? <span key={index}>{itemMap[item.value]}</span> : <></>
       ))}
     </>
   )

contents/51cto.tsx

@@ -2,6 +2,7 @@ import type { PlasmoCSConfig } from "plasmo"
 import { useEffect } from "react"
 
 import { useStorage } from "@plasmohq/storage/hook"
+import { sendToBackground } from "@plasmohq/messaging"
 
 import { addCss } from "~tools"
 
@@ -20,12 +21,24 @@ export default function Cto51() {
 
   useEffect(() => {
     console.log("51CTO status", { closeLoginModal, copyCode })
-    setTimeout(()=>{
+    setTimeout(() => {
       copyCode && copyCodeFunc()
     }, 500)
     closeLoginModal && closeLoginModalFunc()
+    if (copyCode || closeLoginModal) {
+      setIconFunc()
+    }
   }, [copyCode, closeLoginModal])
 
+  function setIconFunc() {
+    sendToBackground({
+      name: "icon",
+      body: {
+        active: true
+      }
+    })
+  }
+
   /* 未登录复制代码 */
   function copyCodeCssFunc() {
     addCss(`
@@ -43,7 +56,7 @@ export default function Cto51() {
   function copyCodeFunc() {
     copyCodeCssFunc()
     // 内容区开启复制
-    var content_views = document.querySelector("article")
+    const content_views = document.querySelector("article")
     content_views && content_views.replaceWith(content_views.cloneNode(true))
 
     // 功能一： 修改复制按钮，支持一键复制

package.json

@@ -1,7 +1,7 @@
 {
   "name": "code-box",
   "displayName": "codebox-免登录一键复制代码(CSDN/知乎/脚本之家/博客园/51CTO博客)",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "本浏览器插件可以用于CSDN/知乎/脚本之家/博客园/51CTO博客/php中文等网站,实现无需登录一键复制代码;支持选中代码;或者代码右上角按钮的一键复制;解除关注博主即可阅读全文提示;去除登录弹窗;去除跳转APP弹窗;页面自定义样式.",
   "author": "027xiguapi. <458813868@qq.com>",
   "scripts": {
@@ -16,6 +16,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@plasmohq/messaging": "^0.6.2",
     "@plasmohq/storage": "^1.11.0",
     "plasmo": "0.88.0",
     "react": "18.2.0",