开发一款浏览器插件

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

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

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"]
        }
      ]
  }

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

script.js:

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

document.head.appendChild(style)

可以有多种写法,如下

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

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

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

document.head.appendChild(style)

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

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

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

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

1. 还可以直接移除该元素:

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

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

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

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

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

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

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

最后如何发布?[2]

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

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

注册居然还需要花钱..

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

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

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

还需要账号开启两步验证

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

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

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

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

参考资料

[1]

这个网站: https://www.flaticon.com/packs/halloween-8

[2]

最后如何发布?: https://support.google.com/chrome/a/answer/2714278?hl=zh-Hans

[3]

在 Chrome 网上应用店中进行发布: https://developer.chrome.com/docs/webstore/publish?hl=zh-cn

[4]

用这个: https://www.iloveimg.com/zh-cn/resize-image

[5]

【Chrome 扩展开发】发布 Chrome/Edge 扩展到应用商店: https://juejin.cn/post/7250853186386378812

[6]

官方文档: https://learn.microsoft.com/zh-cn/microsoft-edge/extensions-chromium/publish/publish-extension