使用Vue怎么实现一个Chrome浏览器插件

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

创新互联公司为您提适合企业的网站设计 让您的网站在搜索引擎具有高度排名，让您的网站具备超强的网络竞争力！结合企业自身，进行网站设计及把握，最后结合企业文化和具体宗旨等，才能创作出一份性化解决方案。从网站策划到网站建设、成都网站制作， 我们的网页设计师为您提供的解决方案。

Vue的优点

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

基本知识

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

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

程序目录结构

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

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

• manifest.json：清单文件，用来描述插件本身，必须。

• icon.png：图标文件，如果你不想用默认图标这也是必须的。

• popup.html：算是插件的功能页吧，你至少得有点功能才有存在的意义吧。

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

清单文件示例

下面是一个精简版的manifest.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，先写manifest.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/"
}

再补一下图标文件和popup.html。

Hello world!

打开浏览器插件页面，右上角打开开发者模式，加载插件目录。

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

把Vue加进来

好像很容易嘛，我们直接用cdn的Vue，改造一下popup.html。

  {{ message }}