火狐扩展WebExtension新手入门-创新互联

什么是WebExtension？

WebExtension(扩展)是夸浏览器用于开发附加组建的工具。在很大程度上与谷歌、欧朋等浏览器兼容。

创新互联建站是一家从事企业网站建设、成都网站设计、成都网站制作、行业门户网站建设、网页设计制作的专业网站建设公司，拥有经验丰富的网站建设工程师和网页设计人员，具备各种规模与类型网站建设的实力，在网站建设领域树立了自己独特的设计风格。自公司成立以来曾独立设计制作的站点上千多家。

WebExtension 剖析

WebExtension 是一个打包好的、可供发布的安装包，该安装包包含若干文件。

每个WebExtension必须包含一个名为"manifest.json"(manifest 表现,表明)，该文件可以指向如下类型的文件

• background pages：执行一个长时间运行的逻辑

• content scripts：与网页进行交互(与JS在页面中的<script>元素不一样)

• browser action files：在工具栏中添加按钮

• page action files：在地址栏添加按钮

• options pages：为用户定义一个可浏览的UI界面，可以改变曾经的设置

• web-accessible resources：是打包好的内容可用于网页与目录脚本

manifest.json

唯一一个在每个WebExtension中必须存在的文件。包含了关于这个扩展插件基本的元数据。比如扩展的名字，版本和所需权限。以及扩张需要的版本信息与权限。并且，也对WebExtension中其他文件进行了链接。

WebExtension 剖析官网详细信息

第一个WebExtension

创建WebExtension项目的目录

mkdir borderify
cd borderify

manifest.json

在borderify 目录内创建 "manifest.json" 文件。

{	"manifest_version": 2,#脚本类型必须为2，theme为4
	"name": "Broderify",#扩展名必须
	"version": "1.0",#扩展版本必须
	"description": "first test",#扩展描述可选
	"homepage_url": "http://dearch.blog.51cto.com",#扩展主页链接
	"icons": {
	    "48": "icons/border-48.png"
	},#扩展图标可选

	"content_scripts": [
		{	"matches": ["<all_urls>"],#URL匹配规则与正则不同，表示配置所有网址
			"js": ["borderify.js"]
		}
	]#页面交互脚本
}

content_scripts告诉Firefox通过模式匹配网页的URL并加载脚本，在上面的案例中，我们要求Firefox将所有的网页全部加载一个 "borderify.js"脚本

URL匹配规则详细信息

borderify.js

最后在 "borderify" 目录下直接创建 "borderify.js"：

document.body.style.border = "5px solid green";

测试效果

检查文件是否在正确的位置：

borderify/
    icons/
        border-48.png
    broderify.js
    manifest.json

打开火狐浏览器的"about:debugging"页面,点击"临时加载附加组件按钮"并选择你的附加组件目录：

组件将会被安装，现在可以新打开一个页面，页面上有一个绿色的边框，如果没有出现重启一下浏览器。 

卸载扩展

打开火狐浏览器菜单,选择"附加组件" 或者直接地址栏输入 "about:addons" 

WebEXtension开发官方网址

以上实例可以直接使用于 谷歌浏览器 。

附件：http://down.51cto.com/data/2366499

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享文章：火狐扩展WebExtension新手入门-创新互联
文章源于：https://www.cdcxhl.com/article4/djedoe.html

成都网站建设公司_创新互联，为您提供小程序开发、自适应网站、用户体验、软件开发、静态网站、建站公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联