优享资讯 | 开发一款浏览器插件

掘金后端 ( ) • 2024-05-05 17:13

目标:希望将知乎消息和私信的红点隐藏,眼不见心不烦

创建一个项目,目录结构如下:

zhihu-extension/
  manifest.json
  script.js

其中manifest.json:

{
    "manifest_version": 3,
    "name": "Remove Zhihu Chat Icon",
    "version": "1.0",
    "action": {
        "default_icon": "icon.png"
      },

      "content_scripts": [
        {
          "matches": ["https://www.zhihu.com/*"],
          "js": ["script.js"]
        }
      ]
  }

可以从这个网站下载个好看的图标,命名为default_icon字段对应的名称

script.js:

const style = document.createElement('style')
style.innerHTML = `
  .css-nvf2q2 {
    display: none;
  }
`

document.head.appendChild(style)

可以有多种写法,如下

如果想使用CSS来隐藏或删除知乎私信 icon 这个 div,可以这么操作:

在扩展的脚本文件(script.js)中添加样式:

const style = document.createElement('style')
style.innerHTML = `
  .css-nvf2q2 {
    display: none;
  }
`

document.head.appendChild(style)

这段CSS会把 class 为 ".css-nvf2q2" 的 div 设为不显示(display: none)
也可以设置其高度和宽度为0来隐藏:

.css-nvf2q2 {
  height: 0;
  width: 0;
}

另外一种方法是利用innerHTML清空 div 内容:

document.querySelector('.css-nvf2q2').innerHTML = ''

还可以直接移除该元素:

document.querySelector('.css-nvf2q2').remove()

这些方法都是在内容脚本中添加,同样等知乎网页渲染完成后执行即可。
使用CSS会更轻量级一些,无需直接操作DOM元素。

利用CSS样式设置".css-nvf2q2"为不可见就可以很好地隐藏知乎私信icon了。

可以在浏览器控制台执行试一下,看是否生效

然后打开 chrome://extensions/, 点击加载已解压的扩展程序

选择项目,然后如果有错误,查看相应提示,然后搜索解决

本地测试已经可用,可以考虑发布到chrome应用商店

最后如何发布?

要在 Chrome 网上应用店中添加应用或扩展程序，先压缩文件所在的文件夹。然后，在 Chrome 网上应用店中进行发布。

(先改个名字为Remove Zhihu Red Icon)

注册居然还需要花钱..

(Google Play开发者账号要25美元,Chrome应用商店开发者要5美元)

用招行Visa卡支付成功了..

之后在 https://chrome.google.com/webstore/devconsole 修改个人信息

还需要账号开启两步验证

图标的尺寸(128x128 像素),截图的尺寸(1280x800 或 640x400)都有要求,需要相应调整,可以用这个

详细可参考: 【Chrome 扩展开发】发布 Chrome/Edge 扩展到应用商店

对于Edge浏览器的发布流程，可参考官方文档

微软Edge比较好,不用花钱注册...而且文档比谷歌好, 就是Edge的用户量远不及Chrome