草庐IT

十分钟带你入门Chrome插件开发

River_何 2024-01-03 原文

一、简述

我们所说的chrome插件一般都是指chrome扩展程序（Chrome Extension）。chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的文件。chrome插件除了Chrome浏览器之外，还可以运行在所有webkit内核的国产浏览器，比如360极速浏览器、360安全浏览器、搜狗浏览器、QQ浏览器等等。

二、chrome插件的能力

除了支持传统的一切 web API、JavaScript API 以外，chrome插件额外支持以下API（chrome.xxx）：

  • bullet 浏览器窗口（chrome.window）
  • tab标签（chrome.tabs）
  • 书签（chrome.bookmark）
  • 历史（chrome.history）
  • 下载（chrome.download）
  • 网络请求（chrome.webRequest）
  • 自定义右键菜单（chrome.contextMenus）
  • 开发者工具扩展（chrome.devtool）
  • 插件管理（chrome.extension）

三、chrome插件的组成

主要由以下部分组成：

  1. manifest.json （配置文件，目前最新是v3版本）
  2. popup (点击插件图标弹出的页面)
  3. content script (插入到目标页面中执行的JS)
  4. background script (在浏览器后台Service Workers中运行的程序)
  5. options (选项页面，可有可无)

四、manifest v3的主要特性

  1. Service Workers取代background pages，使用Service Workers，可对资源进行缓存，从而实现离线访问。
  2. 网络请求调整，新增了一个declarativeNetRequestAPI，允许插件修改及阻断网络请求。
  3. 远程资源访问限制，禁止访问外部的JavaScript及Wasm文件，图片、音视频文件不受影响。
  4. Promises使用，可以愉快地使用promise了，包括async/await。
  5. manifest文件的部分配置和chrome API做了部分调整。

五、基于manifest v3的chrome插件Demo展示





如需获取demo项目源码，请到我的github上自行clone，顺便给咱点个Star，非常感谢。
https://github.com/hepengwei/chrome-extension-basic-demo

六、chrome插件开发本地调试

  1. 调试popup.html页面：右键点击浏览器右上角插件图标，然后选择点击"审查弹出内容"。
  2. 调试background.html或background.js：在浏览器的扩展程序管理页面找到自己加载的扩展程序，然后点击"Service Worker"（MV2则是"背景页"）。
  3. 调试content_scripts.js：在注入的页面按F12，和正常页面一样调试。
  4. 调试options.html页面：右键点击浏览器右上角插件图标，然后选择点击"选项"，打开插件的选项页，然后按F12，和正常页面一样调试。

七、chrome插件开发注意事项总结

  1. manifest.json必须放在插件项目的根目录，里面包含了插件的各种配置信息，其中也包括了popup、content script、background script等路径。

  2. 不支持使用SVG格式的图片。

  3. 在MV3中，由于Service Workers的机制，background页中不支持使用XMLHttpRequest，建议使用fetch()。

  4. 不允许在html文件中写js代码，只能通过script标签导入js文件的方式，导入文件也不能使用项目外部的文件，比如不能使用CDN上的文件

  5. 不要直接在元素中给onclick属性一个函数调用，例如testB，即使有定义onSave方法，也会报错onSave is not defined，要给元素添加事件要使用JS动态添加，例如$(“#save”).click(onSave)。

  6. 内容脚本和网站想要访问的所有资源都必须在web_accessible_resources属性下声明。

  7. popup可以直接调用background中的JS方法，也可以直接访问background的DOM。

  8. 在对popup页面审查元素的时候popup会被强制打开无法关闭，只有控制台关闭了才可以关闭popup，原因很简单：如果popup关闭了控制台就没用了。

  9. 插件图标在未命中popup的URL匹配规则的页面时没有变灰，这是chrome自身的一个bug（可以关注bug论坛：https://bugs.chromium.org/p/chromium/issues/detail?id=1127067）。

  10. chrome.tabs.connect或chrome.tabs.sendMessage不能用于与选项页面通信，选项页面可以使用chrome.runtime.connect和chrome.runtime.sendMessage与background页通信。

  11. 很多时候你发现你的代码会莫名其妙的失效，找来找去又找不到原因，这时打开background的控制台才发现原来某个地方写错了导致代码没生效，正是由于background报错的隐蔽性(需要主动打开对应的控制台才能看到错误)，所以特别注意这点。

  12. 关于content script的注意事项

  • content script文件中可以获取web页面的DOM并修改，content script和原始页面共享DOM，但是不共享JS，JS是相互隔离的，可以通过window.postMessage和window.addEventListener来实现二者消息通讯。
  • 不能访问background或popup中JS定义的变量或方法。
  • 不能访问web页面或其他content script中定义的变量或方法。
  • 不能发送跨域请求。
  • content script文件中只能使用下面列出的API:
    chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
    chrome.i18n
    chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
    chrome.storage

八、国际化配置

在项目根目录下创建名为 “_locales” 的文件夹，在该文件夹中加入如下文件夹及文件

  • _locales/en/messages.json
  • _locales/zh_CN/messages.json

在每种语言的messages.json中添加相同的属性变量，配置如下：

{
    "tooltip": {
       "message": "这里是字段显示的内容"
    }
}

使用时
在manifest.json或CSS文件中通过 __MSG_tooltip__ 引入，

{
    "action": {
        "default_title": "__MSG_tooltip__"，
    },
    "default_locale": "zh_CN",
}

在JS文件中通过 const tooltip = chrome.i18n.getMessage(“tooltip”) 引入。

入门Chromexffxff0cxff0javascript前端

有关十分钟带你入门Chrome插件开发的更多相关文章

  1. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  2. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  3. ruby - 使用 C 扩展开发 ruby​​gem 时，如何使用 Rspec 在本地进行测试？ - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当

  4. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  5. ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2

    我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？ 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

  6. ruby - 在 Windows 机器上使用 Ruby 进行开发是否会适得其反？ - 2

    这似乎非常适得其反，因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby​​-mysqlgem问题(gem本身发生段错误，一个名为UnixSocket的类显然在Windows机器上不能正常工作，等等)。我只是在浪费时间吗？我应该转向不同的脚本语言吗？ 最佳答案 我在Windows上使用Ruby的经验很少，但是当我开始使用Ruby时，我是在Windows上，我的总体印象是它不是Windows原生系统。因此，在主要使用Windows多年之后，开始使用Ruby促使我切换回原来的系统Unix，这次是Linux。Rub

  7. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  8. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  9. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  10. LC滤波器设计学习笔记（一）滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称

随机推荐