浏览器基本都在世界上，都在Chromium的世界里。那么，能够编写一个浏览器插件就可以算是一个回报率不错的技能了。

基础知识

浏览器插件正式称为扩展，它允许您向浏览器添加各种功能，但不需要深入研究浏览器自己的代码。您可以使用HTML、CSS和JavaScript创建新的扩展。如果你曾经写过一个网页，写一个插件是非常容易的。

一个常见的插件通常是地址栏后面的一个图标，它可以在点击后为你当前的网页提供各种功能，或者在你右键点击网页时弹出一个附加菜单。

程序目录结构

最简单的扩展程序只需要3个文件，或者更少。

my-addon |-manifest . JSON |-icon . pngpopup . html manifest . JSON:manifest文件，用于描述插件，必须。Icon.png:图标文件，如果您不想使用默认图标，这也是必要的。这是一个插件的功能页面。你至少要有一些功能才有意义。当然，上面的例子是最简单的情况。一般的插件会有多个html、js目录、css目录等等。您可以将插件视为一个静态网站，但唯一的区别是有一个额外的清单文件来描述这个静态网站。

清单文件示例

下面是manifest.json的简化版本.

{ 'manifest_version': 2，' name': '一键式小猫'，' description': '此扩展演示了使用小猫的浏览器操作，版本' :' 1.0 '，'权限' :[' https://secure . Flickr.com/']，' browser _ action ' : { ' default _ icon ' : ' icon . png '，' default _ popup' 3333如果要深入查看官方文档，就可以了。

你好世界插件

有了基础知识，我们先来一个Hello World，写manifest.json。

{ 'manifest_version': 2，' name': 'Hello '，' version': '1.0.0 '，' description': 'Hello，Chrome扩展'，' icons ' : { ' 16 ' : ' img/icon . png '，' 48': 'img/icon.png '，' 128': 'img/icon.png' }，' browser _ action ' : { ' default _ icon ' : ' img/icon . png '，' default_title': 'Hello World '，' default _ popup ' 3: ' popup . html ' } '

！DOCTYPE html html body 1 hello world！/h1/body/html打开浏览器插件页面，打开右上角的开发者模式，加载插件目录。

这个时候，我们的第一个插件就可以了。单击插件图标显示Hello World。

添加Vue到其中

这似乎很容易。我们直接用CDN的Vue来改造popup.html吧。

！DOCTYPE html htmlbodydiv id=' app ' { message } }/div script src=' http :https://cdn . bootscs.com/Vue/2 . 6 . 6/Vue . js '/script script var app=new Vue({ El : ' # app '，data : { message : ' Hello Vue！'} })/script/body/html不要卸载刚安装的插件目录，只要再次点击插件按钮，最新的代码就会自动加载。但是好像不对，和预期的结果不一样。

并且注意插件页面，有错误。

拒绝加载脚本“https://cdn . bootcss.com/vue/2 . 6 . 6/vue . js”，因为它违反了以下内容安全策略指导：“脚本-src ' self ' blob : file system : chrome-extension-resource :”。请注意，未显式设置“script-src-elem ”,因此“script-src”用作后备。

拒绝执行内联脚本，因为它违反了以下内容安全策略指令： '脚本-src 'self' blob:文件系统： chrome-extension-resource : '。' unsafe-inline '关键字、哈希(' sha 256-fMtOu4CF/4byghzou6ltgn qylcxfw 9 rbnaysk 3yz 53w=')或随机数(' nonce-. ')是启用内联执行所必需的。

默认情况下，浏览器插件权限非常低，不允许访问插件文件以外的文件、调用内联脚本以及使用eval等函数。

您需要在清单文件中配置内容安全策略(CSP)才能使用Vue。

{ 'manifest_version': 2，//.browser_action': { //.}、“content _ security _ policy”:“style-src”self“unsafe-inline”；脚本-src 'self ' '不安全-eval ' https://cdn.bootcss.com；对象-src ' self '；}因为这个CSP写起来不太友好，大网友做了一个工具帮你。

https://github.com/foundeo/content-security-policy.com/

接下来，将页面中的脚本内容移动到单独的文件中。

//popup.html！DOCTYPE html htmlbodydiv id=' app ' { message } }/div script src=' http :https://cdn . bootscs.com/Vue/2 . 6 . 6/Vue . js '/script script src=' http : app . js '/script/body/html//app . jsnew Vue({ El : ' # app '，data: { message: ' Hello Vue！'}})刷新插件，就完成了。

如何调试插件

调试插件就像调试一个普通的网页一样简单。只需右键单击审阅元素。

包括插件配置页面、新建弹出页面等。可以用同样的方法进行调试。

如何发布插件

完成插件开发后，您可以在启用了开发人员模式的插件中心看到“打包插件”按钮。这个按钮可以帮助你快速打包crx文件。您不需要为第一个包提供密钥，但是它会帮助您生成密钥。对于后续的版本升级，需要用同一个密钥进行打包，否则会被认为是一个新的插件，所以切记要把密钥保存好。

你可以在商店里发布打包好的crx文件，但是在Google Store发布需要付费，而且你是开发者会员，一年9.9美元。不知道国内各种店是否收费。

恶心的是，如果你的插件没有在谷歌浏览器商店上架，Chrome就认不出来了。以前可以拖到插件页面安装，现在绕不开了。但是基于Chromium开发的第三方浏览器还是可以安装的，比如Opera、QQ、360等等。

一些技巧

能弥补自己缺点的人或观点。

可能别人已经做了你想做的插件，或者你想学习别人的插件。有两种方法。

右键单击其他人的插件页面，查看代码如何工作。安装一个下载crx的插件，然后把别人的插件从商店下载到本地，重命名为zip并解压，就可以看到源代码了。当然，其他人的源代码可能已经被混淆和加密。

插件页面大小

如果你的插件会弹出一个页面，浏览器默认会根据内容适配页面大小，就像上面例子中的hello world一样，很难看。一般来说，插件页面会限制正文的高度和宽度，以免弯曲。

安全请求

现在很难找到不是https的页面，所以如果你的插件向后台发送请求，需要支持https协议，否则会被拦截。

插件配置

如果您的插件是可配置的，您如何保存配置信息？直接使用localStorage。localStorage独立于每个站点，每个插件都可以看作是一个独立的站点，所以当你调用插件中的localStorage对象时，它就是当前插件的localStorage。如果您希望配置同步，请考虑chrome.storage对象，它提供storage.local和storage.sync

一个完整的例子

我不想推荐文档什么的，但是如果需要我会搜索。那么有完整的例子吗？当然，去看看我的github。如果你觉得好，就喜欢。

https://github.com/tobyqin/chrome_vue_ext_demo

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。