介绍
这篇文章给大家介绍使用Vue怎么实现一个Chrome浏览器插件,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
Vue的优点 Vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。
<>强基本知识
浏览器插件官方的说法叫扩展程序,允许你为浏览器增加各种功能,但不需要深入研究浏览器本身的代码。你可以用HTML、CSS和JavaScript创建新的扩展程序,如果你曾经写过网页,那么写一个插件是非常轻松的事情。
常见的插件一般就是地址栏后面的一个图标,点击后给你当前网页提供各种功能,或者在你点击网页右键时弹出额外的菜单。
<强>程序目录结构
最简单的扩展程序只需要3个文件,或者更少。
my-addon
,|安康;manifest.json
,|安康;程序
,└─弹出。html <李> manifest.json:清单文件,用来描述插件本身,必须。
<李> 程序:图标文件,如果你不想用默认图标这也是必须的。
<李> popup.html:算是插件的功能页吧,你至少得有点功能才有存在的意义吧。
当然上面的例子是最精简的情况了,一般的插件会有多个html,还有js目录,css目录等等,你可以把插件当成一个静态网站,唯一的区别是多了一个清单文件用来描述这个静态网站。
<强>清单文件示例
下面是一个精简版的清单。json .
{
,“manifest_version": 2
,“name":“One-click Kittens"
,“description":“却;能够extension demonstrates a browser action with ,小猫!”
,“version":“1.0“,
,“permissions":,
“才能;https://secure.flickr.com/"
,),
,“browser_action": {
“default_icon"才能:,“icon.png"
“default_popup"才能:,“popup.html"
,}
} 看上去是不是很直观,名字,版本,描述,权限,行为。如果要深入再查查官方文档就好了。
<强> Hello World插件
有了基础知识,我们速度来个Hello World,先写清单。json .
{
“manifest_version"才能:,2,
“name"才能:,“Hello"
“version"才能:,“1.0.0"
“description"才能:,“你好,,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":,“popup.html"
,,},
“permissions"才能:
(才能
,,,“& lt; all_urls>“
,,,
“homepage_url"才能:,“https://github.com/tobyqin/"
} 再补一下图标文件和弹出。html。
& lt; ! DOCTYPE html>
& lt; html>
& lt; body>
& lt; h2> Hello 世界! & lt;/h2>
& lt;/body>
& lt;/html> 打开浏览器插件页面,右上角打开开发者模式,加载插件目录。
这时我们的第一个插件就好了,点击插件图标就可以显示Hello World。
<强>把Vue加进来
好像很容易嘛,我们直接用CDN的Vue,改造一下弹出。html。
& lt; ! DOCTYPE html>
& lt; html>
& lt; body>
& lt; div id=癮pp"祝辞
,,{{,message }}
& lt;/div>
& lt; script src=癶ttps://cdn.bootcss.com/vue/2.6.6/vue.js"祝辞& lt;/script>
& lt; script>
var 才能;app =, Vue ({new
el:,,,, & # 39; #应用# 39;
数据:,,,,{
,,,,,的信息:,& # 39;Hello Vue ! & # 39;
,,,}
})才能
& lt;/script>
& lt;/body>
& lt;/html> 不用卸载刚才安装的插件目录,只要再点击一下插件按钮就会自动加载最新的代码。不过好像不对,和期望的结果不一样。
