Chrome扩展学习指南

最新推荐文章于 2023-10-29 13:39:14 发布

coder天天在线

最新推荐文章于 2023-10-29 13:39:14 发布

阅读量284

点赞数

分类专栏：大前端时代文章标签： Chrome扩展

本文链接：https://blog.csdn.net/m0_38080126/article/details/114319880

版权

大前端时代专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Chrome扩展是为开发者准备，通过插件扩展可以自定义浏览器的一些行为以满足个人的开发需求，比如可以屏蔽弹窗广告，自定义HTTP请求头等。

Chrome扩展简介

在客户端可以通过访问chrome://extentions打开扩展管理界面

扩展文件组成：

manifest.json文件：插件配置文件，包括插件名字版本以及脚本执行入口等重要信息；
icon文件：图标文件，格式为png，可以有16*16和48*48等图片文件；
资源文件：包括js和html文件，插件运行的具体内容，在manifest文件中配置；

扩展指令大全

指令都集中在manifest.json文件中，有必填项和选填项。

属性名字	是否必填	属性描述
name	是	插件名字
version	是	插件当前版本
manifest_version	是	指定清单文件格式的版本，在Chrome18后固定为2
description	否	简单介绍插件的信息
icons	否	插件图标建议PNG格式，有三种图标：1616(扩展信息栏)，4848(扩展管理页面)，128*128(安装过程中)
default_locale	否	国际化，对多语言浏览器的支持
background	否(重要)	插件指定运行的后台脚本，可以是html或js文件，如：*"background": {"scripts": ["bg.js"]}*
content_scripts	否(重要)	运行在浏览器页面的上下文页面，使用标准的DOM模型， "content_scripts": { *"matches": ["http:///", "https:///"],* "js": "script.js", "run_at": "document_end", "all_frames": false }
options_page	否	自定义扩展选项页，可以在扩展详情中打开这个页面，更改值可以放在扩展程序存储中
browser_action	否(重要)	可以设置扩展信息栏的图标，图标悬浮提示，点击图标弹出窗口， "browser_action": { "default_title": "plugin test", "default_popup": "test.html", "default_icon": { "16": "icon16.png", "48": "icon48.png" } } 注： 1. page_action与browser_action只能用其一； 2. 如果不配置default_popup图标按钮将不可点； 3. 与page_action区别是browser_action中图标始终显示toolbar，而page_action可以控制图标显示与隐藏；
page_action	否	与browser_action功能类似且两者不能同时出现 (注：page_action与browser_action只能用其一)
permissions	否	插件在浏览器中使用的权限，包括tabs(访问浏览器选项卡)、activeTab(获取当前选项卡)、notifications(浏览器通知，基于html5)、storage(存储)、http:///(任意URL)
update_url	否	插件自动更新地址，对官方发布的插件无效，范例： <?xml version='1.0' encoding='UTF-8'?> <gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'> <app appid='dennis'> <updatecheck codebase='http://esb.com/ext/esb_v2.crx' version='2.0' /> </app> </gupdate>
web_accessible_resources	否	允许扩展外的页面访问扩展内的资源

扩展开发开发实例

点击扩展图标弹出窗口效果图：

代码实例：

{
    "name": "Our Chrome Extension's Name",
    "version": "1.0",
    "manifest_version": 2,
    "description": "This is the first Chrome extension.",
    "icons": { 
        "16": "icon_16.png",
        "48": "icon_48.png",
        "128": "icon_128.png"
    },
    "background": {
        "scripts": ["bg.js"]
    },
    "browser_action": {
        "default_title": "dennis title",
        "default_popup": "pop.html"
    },
    "options_page": "options.html",
    "permissions": [ "tabs", "storage", "http://*/*", "https://*/*" ],
    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*"],
        "js": ["sample.js"]
    }],
    "web_accessible_resources": [ "resources/*", "resources/**/*" ]
}

pop.html代码：

<html>
    <head>
        <title>弹窗123</title>
        <meta charset="utf-8">
    </head>
    <body>
        <form>
            姓名：<input type="text" /><br />
            家乡：<input type="text" /><br />
            <input type="submit" /><br />
        </form>
    </body>
</html>

其它页面不再一一介绍。