参考教程: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 扩展程序开发调试简明教程 Chrome 扩展程序是Chrome 浏览器的一种插件,能够增强浏览器的功能和性能。本文档旨在提供一个简明的教程,指导用户如何开发和调试 Chrome 扩展程序。 一、加载扩展程序 加载...
首先,我们需要澄清一点,Chrome插件实际上是指Chrome扩展,它们之间存在细微的区别。真正的Chrome插件(Chrome Extension)通常涉及更底层的浏览器功能扩展,可能需要深入理解浏览器源码。然而,日常所说的Chrome...
Chrome 插件开发入门教程 Chrome 插件开发入门教程旨在帮助开发者快速了解 Chrome 插件的开发流程和基本概念。下面是本教程的知识点总结: 1. Chrome 插件开发的基本概念 Chrome 插件是一个小型的程序,可以增强...
总的来说,这个压缩包是Chrome插件开发者的宝贵资源,涵盖了从基础概念到高级技巧的各种知识,对于想要涉足Chrome扩展开发的C#程序员来说,是一份极好的学习材料。通过学习和实践,开发者可以创建出满足特定需求的...
这个PDF版本可能是图灵社区中关于Chrome扩展开发的书籍的完整版,对于开发者来说是一份宝贵的参考材料。 Chrome应用(Apps)则更像独立的应用程序,它们可以在离线状态下运行,并且通常拥有更大的权限和更多的API...
Chrome插件,也被称为Chrome扩展,是Google Chrome浏览器上的应用程序,可以增强或修改浏览器的功能。它们通常是用HTML、CSS和JavaScript编写,通过Chrome的API(应用程序接口)与浏览器交互,提供用户自定义的浏览...
Chrome扩展插件是基于Google Chrome浏览器的个性化工具,它们可以扩展浏览器的功能,提供各种各样的便利,如增强网页浏览体验、提升工作效率或者增加娱乐性。本文将通过三个实例,帮助初学者快速入门Chrome插件的...
"chrome-extensions:chrome扩展开发之旅系列源代码" 是一个可能包含了一系列教程或示例代码的资源,帮助开发者学习和实践Chrome扩展的开发。 在Chrome扩展开发中,主要有以下几个关键知识点: 1. **manifest.json*...
主要介绍了使用Vue开发自己的Chrome扩展程序过程详解,浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等。,需要的朋友...
入门Chrome扩展开发,首先需要了解其核心组成部分:manifest.json文件、背景脚本、内容脚本、HTML和CSS资源,以及可能的JavaScript库。Manifest文件是扩展的配置文件,它定义了扩展的元数据和功能,如权限、图标、...
Chrome插件,也称为Chrome扩展,是Chrome浏览器的强大特性,可以让用户根据自身需求定制浏览器行为。 在Chrome插件开发中,主要涉及以下几个核心概念: 1. **Manifest文件**:每个Chrome插件都必须有一个`manifest...
总的来说,这个实例是一个实践性的教程,涵盖了Chrome扩展的多个核心概念,包括扩展结构、API使用、文件操作以及用户界面的互动。通过理解并学习这个实例,开发者可以进一步掌握Chrome扩展的开发技术,从而创建自己...
在本"入门示例chrome扩展"教程中,我们将深入理解如何构建一个基本的Chrome扩展。 首先,Chrome扩展由以下几个核心组件构成: 1. **manifest.json**:这是每个Chrome扩展的配置文件,它包含了扩展的基本信息,如...
思源Chrome扩展 :light_bulb: 介绍 思源的 Chrome 扩展。 :hammer_and_wrench: 设置 Chrome 网上应用店 开发版 在 Chrome 地址栏中输入chrome://extensions打开扩展管理页面 打开右上角的“开发者模式”,然后点击...
总的来说,"ChromeExtension-master"存储库提供了学习Chrome扩展开发的实践案例,涵盖了从基础概念到高级特性的广泛内容。通过深入研究这个项目,你可以掌握创建自定义Chrome功能的技能,理解JavaScript在浏览器环境...
### Chrome插件开发知识点详解 #### 一、Chrome插件基础概述 ...通过以上对Chrome插件开发的基础教程和API的解析,以及示例代码的分析,开发者可以更好地理解如何从零开始构建一个功能完善的Chrome插件。
【标题】:“Chrome扩展开发教程:HTTPS应用实践” 在 Chrome 扩展开发中,HTTPS 是一个重要的主题,因为它涉及到浏览器安全性和数据传输的加密。Chrome 扩展是用于增强或改变 Google Chrome 浏览器功能的小型软件...
首先,我们需要了解Chrome扩展的基本文件结构。manifest.json文件是扩展的核心,它包含了所有必要的元数据和权限设置。例如,一个简单的manifest.json示例会定义扩展的名称、版本、所需权限,以及背景页或弹出窗口的...