怎么在浏览器上增加chatgpt插件 使用Vue怎么实现一个Chrome浏览器插件

这篇文章给大家介绍使用Vue怎么实现一个浏览器插件，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

基本知识

浏览器插件官方的说法叫扩展程序，允许你为浏览器增加各种功能，但不需要深入研究浏览器本身的代码。你可以用HTML，CSS和创建新的扩展程序，如果你曾经写过网页，那么写一个插件是非常轻松的事情。

常见的插件一般就是地址栏后面的一个图标，点击后给你当前网页提供各种功能，或者在你点击网页右键时弹出额外的菜单。

程序目录结构

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

my-addon
 |- manifest.json
 |- icon.png
 └─ popup.html

当然上面的例子是最精简的情况了，一般的插件会有多个html，还有js目录，css目录等等，你可以把插件当成一个静态网站，唯一的区别是多了一个文件用来描述这个静态网站。

清单文件示例

下面是一个精简版的.json。

{
 "manifest_version": 2,
 "name": "One-click Kittens",
 "description": "This extension demonstrates a browser action with kittens.",
 "version": "1.0",
 "permissions": [
  "https://secure.flickr.com/"
 ],
 "browser_action": {
  "default_icon": "icon.png",
  "default_popup": "popup.html"
 }
}

看上去是不是很直观，名字，版本，描述，权限，行为。如果要深入再查查官方文档就OK了。

Hello World插件

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

{
  "manifest_version": 2,
  "name": "Hello",
  "version": "1.0.0",
  "description": "Hello, Chrome extension.",
  "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": "popup.html"
  },
  "permissions":
  [
    ""
  ],
  "homepage_url": "https://github.com/tobyqin/"
}

Hello world!

  {{ message }}

<script src="https://cdn.bootcss.com/vue/2.6.6/vue.js">

  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })

不用卸载刚才安装的插件目录，只要再点击一下插件按钮就会自动加载最新的代码。不过好像不对，和期望的结果不一样。

而且注意看插件页面，出现错误了。

to load the '#39; it the : “-src 'self' blob: : –:”. Note that '-src-elem' was not set, so '-src' is used as a .

to it the : “-src 'self' blob: : –:”. the '-' , a hash ('-/='), or a nonce ('nonce-…') is to .

默认情况下，浏览器插件权限是非常低的，不允许访问除了插件本身的文件以外的文件，不能调用页面内脚本（ ），也不能使用eval之类的函数。

你需要在文件中配置好 （CSP）才能使用Vue。

{
 "manifest_version": 2,
 // ...
 "browser_action": {
  // ...
 },
 "content_security_policy": "style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-eval' https://cdn.bootcss.com; object-src 'self' ;"
}

因为这个CSP写起来实在不怎么友好，伟大的网友做了一个工具可以帮你一把。

接下来，把页面内的内容搬到单独的文件。

// popup.html




  {{ message }}





// app.js
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

刷新一下插件，搞定了。

如何调试插件

调试插件和调试一个普通的网页一样简单，右键选择审查元素就好了。

包括插件的配置页面，新弹出的页面等等，都可以用一样的方法调试。

如何发布插件

当你完成插件开发后，在启用开发者模式的插件中心就可以看到打包插件按钮，这个按钮可以帮你快速打包crx文件，第一次打包你不需要提供密钥，它会帮你生成一个密钥，之后的版本升级你需要用同一个密钥打包，否则就被认为是一个新的插件了，所以切记保存好密钥。

拿着打包好的crx文件你就可以到商店发布啦，不过发布到谷歌商店是要交钱的，一年9.9美刀的开发者会员。国内的各种商店收不收费不知道。

比较恶心的是，如果你的插件没有在谷歌浏览器的商店里上架，浏览器是不认的，以前还可以拖到插件页面安装，现在怎么都绕不过去了。但基于开发的第三方浏览器还是可以装的，比如Opera，QQ，360等等。

一些技巧

他山之石

可能你要做的插件别人已经做过了，或者你想借鉴别人的插件，有两个方法。

右键审查别人的插件页面，看看代码怎么工作的。

安装一个下载crx的插件，然后把别人的插件从商店下载到本地，重命名为zip并解压，就可以看到源码了。

当然啦，别人的源码可能做过混淆加密。

插件页面大小

如果你的插件会弹出一个页面，浏览器默认会根据内容自适应页面大小，就像上面例子里的那个hello world，很丑是吧。一般插件页面都是限制body高度和宽度的，这样才不会歪。

安全请求