参考教程:http://open.chrome.360.cn/extension_dev/overview.html
360极速浏览器是使用谷歌浏览器内核构建的,其支持的扩展和谷歌浏览器相同,所以可以根据这个翻译过的谷歌浏览器扩展开发文档来学习。
看了很多关于chrome开发教程,很感谢作者的热心,不过在使用中多有疑惑,经过各处资料查找和查看google文档,学会了一些扩展开发的技巧,这里整理如下:
chrome浏览器扩展安装后可以实现如下功能:
- 如果需要,在地址栏右侧放置一个小图标,点击小图标,会弹出浮动层,里面是一个html文档,这个文档可以包含html代码和js的引入(不可直接写js,而且所有引入的js必须在扩展包内,见:http://developer.chrome.com/extensions/contentSecurityPolicy.html)
- 如果需要,我们可以重新定义chrome新建标签,也是一个html文档哦。
- 使用桌面通知。
- 扩展右键菜单。
暂时先这么多,我学会更多我再添加内容在这里。。。。。。。。。。
开发流程:
1:本地创建一个目录,用于存放扩展项目文件。
2:目录中写文件manifest.json,这个文件是扩展配置,由chrome浏览器读取并加载其中指定的内容。
3:实现manifest.json文件中的各个项目。
举例:
manifest.json定义如下:
{ "manifest_version" : 2, // 必须有 "name": "测试扩展程序", "version": "1.0.0", "description": "xxx开发团队", "icons": {"128" : "logo.png" }, // 扩展图标设置 "permissions": [ // 扩展允许访问哪些地址 "http://*/*" ], "background": { // 后端一直运行的js,全局的,生命周期从浏览器打开到浏览器关闭 "scripts": ["background.js"] }, "browser_action" : { // 扩展地址栏右侧一个图标,点击出现default_popup指定的页面 "default_title": "xx测试扩展", "default_icon": "logo.png", "default_popup" : "popup.html" }, "chrome_url_overrides": { // 覆盖chrome新建标签 "newtab": "newtab.html" } }
详情参考:http://developer.chrome.com/extensions/manifest.html
然后在popup.html中写html源码,并包含必须存在于项目目录中的js文件即可,这就是说,html不能内嵌任何js代码,必须在html里指定class或id,然后在js文件中为其绑定动作。
比如写:<script src="popup.js"></script>
然后在popup.js中写:
document.addEventListener('DOMContentLoaded', function () { document.querySelector('button').addEventListener('click', clickHandler); main_run(); });
这里要注意的是,为了让页面全部加载后再执行js,不要在js里直接写js运行代码,而要包含在document.addEventListener函数中。
上述函数可以用jquery功能代替:
$('document').ready(function() { $('#yclick').bind('click', function(){alert("yes") }); });
再建立background.js,写一些需要后台保留状态的代码。参照:http://dev.chromechina.com/thread-2255-1-1.html
为了让某些数据在下次浏览器打开还能继续使用,需要用到html5的本地存储功能。
-----------------------------------------------------------------------
使用桌面通知:
为了使用一些功能,必须在manifest.json的permissions中设置,比如要使用桌面通知,就需要在这个字段设置:“notifications”。设置后,在需要的地方加入通知即可显示,比如:
var notification = webkitNotifications.createNotification( 'images/email_open.png', // icon url - can be relative '通知消息', // notification title '明天放假!' // notification body text ); notification.show();
这里使用了images下的图片资源,需要在manifest.json中指定允许访问这个图片,否则会提示错误:Denying load of chrome-extension://{ext_id}/images/email_open.png. Resources must be listed in the web_accessible_resources manifest
设置方法如下所示:
"web_accessible_resources" : [ "images/email_open.png" ],
-----------------------------------------------------------------------
-----------------------------------------------------------------------
扩展右键菜单:
manifest.json设置权限:
"permissions": [
"contextMenus"
]
background.js中写代码:
function background_init() { chrome.contextMenus.create({ type: "normal", title: "访问邻购网", onclick: function(){chrome.tabs.create({url: "http://www.lingou.com"});} }); chrome.contextMenus.create({ type: "normal", title: "访问邻购云POS系统", onclick: function(){chrome.tabs.create({url: "http://pos.lingou.com"});} }); chrome.browserAction.setBadgeText("abcd"); } background_init();
扩展鼠标右键在每个页面都起作用,所以放在共用的后端js中是最方便的,另外,background.js中用window.location.href是不行的,因为它不是某个页面调用的所以没有window对象。
相关推荐
CHROME扩展及应用开发 完整版.pdf
Chrome扩展程序开发调试简明教程doc文档,介绍Chrome扩展程序开发调试的入门知识
主要介绍了使用Vue开发自己的Chrome扩展程序过程详解,浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等。,需要的朋友...
Chrome扩展开发API中提供了一些关于UI外观的操作,如果是刚刚上手的话首先需要了解Browser Actions、Omnibox、选项页等,在这篇JavaScript开发Chrome浏览器扩展程序UI的教程中,我们先来回顾一下基本知识:
JavaScript开发Chrome扫瞄器扩展程序UI的教程_.docx
Chrome扩展示例 注意:这样做是出于教育目的,并且便于学习如何进行镀Chrome扩展。 其中大部分来自因此欢迎您阅读本文档。 入门 扩展由不同的但相互联系的组件组成。 组件可以包括,,, 和各种逻辑文件。 扩展组件...
镀Chrome扩展剂Chrome扩展程序和主题开发的入门套件。Google网上论坛官方文件这是指向各种Chrome开发者页面的链接的目录树。学习基础开发扩展 分发扩展发展官方文档相当详尽且是最新的。 一些建议: 指导开发扩展的...
适用于 SAP UI5 应用开发人员,我的专栏《一套适合 SAP UI5 开发人员循序渐进的学习教程》对这个工具有详细介绍。
欢迎来到我的 Chrome 插件系列教程。 通过本文,你将学到 Chrome 插件以下内容: 1. 扩展manifest。 2. 扩展程序使用的图标大小。 3. 如何使用内容脚本将代码注入页面。 4. 如何使用匹配模式。 5. 扩展权限。 执行...
Web Vitals Chrome扩展程序(alpha) Chrome扩展程序可衡量正常站点的指标立即 此扩展程序以与Chrome测量和向其他Google工具(例如, , )的方式相匹配的方式,来测量三个指标。 它支持所有并利用的库来捕获: ...
然后选择加载正在开发的扩展程序,同时进入文件选择界面,选择刚解压缩后的源安装包,确定。此时已经显示Postman在扩展程序列表中了,并且是已启用的状态。 继续点击立即更新扩展程序,然后关闭Chrome浏览器,重新...
欢迎来到我的 Chrome 插件系列教程。 通过本文,你将学到 Chrome 插件以下内容: 1. 使用扩展服务工作者作为事件协调器。 2. 通过 activeTab 权限保护用户隐私。 3. 当用户单击扩展工具栏图标时运行代码。 4. 使用 ...
欢迎来到我的 Chrome 插件系列教程。 通过本文,你将学到 Chrome 插件以下内容: 1. 使用 Action API 创建扩展弹出窗口。 2. 使用选项卡 API 查询特定选项卡。 3. 通过缩小主机权限来保护用户隐私。 4. 更改选项卡的...
Chrome扩展安全浏览服务 可防主页被篡改 Chrome浏览器上传图片文件卡死该怎么办? Chrome浏览器添加自动冻结功能 不再播放不重要的Flash内容 chrome浏览器设置删除指定网站的指定cookie缓存的详细教程 Chrome...
Alexa技能套件控制台Chrome扩展程序 在Alexa技能控制台中加快Alexa技能测试 厌倦了在Alexa Simulator中键入无数命令? 单击消息旁边的“重新发送”,而不是再次键入 将消息保存到按钮中 安装 选项1:Chrome网上应用...
Spokeo Chrome扩展程序 概述和说明: 此应用程序是为Spokeo设计的,可通过Chrome扩展程序平台为客户提供帮助。 它结合了Chrome的扩展API,Spokeo的客户搜索引擎以及使用Puppeteer分析静态或动态Web内容以查找适用的...
邮递员Chrome扩展旧版 这个库包含代码库邮差Chrome扩展旧版本- v0.0.1到v0.9.9 。 与较新版本有关的更新不会推送到此存储库。 如果您希望报告与有关的问题,请访问我们的支持资料库,为 快速链接 主页-http: 博客...
轨道Chrome扩展程序 直接在GitHub问题和PR中添加有用的开发人员信息。 (需要一个Orbit帐户)。本地安装克隆存储库并安装依赖项: git clone git@github....
字体在本地测试/安装yarn installyarn build // output to build directory 转到chrome:// extensions /,打开开发人员模式,点击“加载解压缩”按钮,选择build/文件夹,然后您将能够在Chrome扩展程序栏中看到扩展...