`

Chrome扩展开发教程

    博客分类:
  • web
 
阅读更多

参考教程:http://open.chrome.360.cn/extension_dev/overview.html

360极速浏览器是使用谷歌浏览器内核构建的,其支持的扩展和谷歌浏览器相同,所以可以根据这个翻译过的谷歌浏览器扩展开发文档来学习。

 

看了很多关于chrome开发教程,很感谢作者的热心,不过在使用中多有疑惑,经过各处资料查找和查看google文档,学会了一些扩展开发的技巧,这里整理如下:

 

chrome浏览器扩展安装后可以实现如下功能:

  1. 如果需要,在地址栏右侧放置一个小图标,点击小图标,会弹出浮动层,里面是一个html文档,这个文档可以包含html代码和js的引入(不可直接写js,而且所有引入的js必须在扩展包内,见:http://developer.chrome.com/extensions/contentSecurityPolicy.html
  2. 如果需要,我们可以重新定义chrome新建标签,也是一个html文档哦。
  3. 使用桌面通知。
  4. 扩展右键菜单。

暂时先这么多,我学会更多我再添加内容在这里。。。。。。。。。。

 

开发流程:

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对象。

分享到:
评论
1 楼 lanshui777 2015-07-22  
压缩文件里面是空的....

相关推荐

    CHROME扩展及应用开发 完整版.pdf

    CHROME扩展及应用开发 完整版.pdf

    Chrome扩展程序开发调试简明教程

    Chrome 扩展程序开发调试简明教程 Chrome 扩展程序是Chrome 浏览器的一种插件,能够增强浏览器的功能和性能。本文档旨在提供一个简明的教程,指导用户如何开发和调试 Chrome 扩展程序。 一、加载扩展程序 加载...

    Chrome插件开发完整教程

    首先,我们需要澄清一点,Chrome插件实际上是指Chrome扩展,它们之间存在细微的区别。真正的Chrome插件(Chrome Extension)通常涉及更底层的浏览器功能扩展,可能需要深入理解浏览器源码。然而,日常所说的Chrome...

    chrome插件开发入门教程

    Chrome 插件开发入门教程 Chrome 插件开发入门教程旨在帮助开发者快速了解 Chrome 插件的开发流程和基本概念。下面是本教程的知识点总结: 1. Chrome 插件开发的基本概念 Chrome 插件是一个小型的程序,可以增强...

    ChromeExtensionDocument:chrome插件中文开发文档.zip

    总的来说,这个压缩包是Chrome插件开发者的宝贵资源,涵盖了从基础概念到高级技巧的各种知识,对于想要涉足Chrome扩展开发的C#程序员来说,是一份极好的学习材料。通过学习和实践,开发者可以创建出满足特定需求的...

    chrome扩展及应用开发pdf

    这个PDF版本可能是图灵社区中关于Chrome扩展开发的书籍的完整版,对于开发者来说是一份宝贵的参考材料。 Chrome应用(Apps)则更像独立的应用程序,它们可以在离线状态下运行,并且通常拥有更大的权限和更多的API...

    chrome插件开发文档-详细pdf版.7z

    Chrome插件,也被称为Chrome扩展,是Google Chrome浏览器上的应用程序,可以增强或修改浏览器的功能。它们通常是用HTML、CSS和JavaScript编写,通过Chrome的API(应用程序接口)与浏览器交互,提供用户自定义的浏览...

    chrome扩展插件的3个例子帮助入门

    Chrome扩展插件是基于Google Chrome浏览器的个性化工具,它们可以扩展浏览器的功能,提供各种各样的便利,如增强网页浏览体验、提升工作效率或者增加娱乐性。本文将通过三个实例,帮助初学者快速入门Chrome插件的...

    chrome-extensions:chrome扩展开发之旅系列源代码

    "chrome-extensions:chrome扩展开发之旅系列源代码" 是一个可能包含了一系列教程或示例代码的资源,帮助开发者学习和实践Chrome扩展的开发。 在Chrome扩展开发中,主要有以下几个关键知识点: 1. **manifest.json*...

    使用Vue开发自己的Chrome扩展程序过程详解

    主要介绍了使用Vue开发自己的Chrome扩展程序过程详解,浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等。,需要的朋友...

    chrome 扩展实例

    入门Chrome扩展开发,首先需要了解其核心组成部分:manifest.json文件、背景脚本、内容脚本、HTML和CSS资源,以及可能的JavaScript库。Manifest文件是扩展的配置文件,它定义了扩展的元数据和功能,如权限、图标、...

    浏览器 chrome 插件开发

    Chrome插件,也称为Chrome扩展,是Chrome浏览器的强大特性,可以让用户根据自身需求定制浏览器行为。 在Chrome插件开发中,主要涉及以下几个核心概念: 1. **Manifest文件**:每个Chrome插件都必须有一个`manifest...

    chrome扩展实例-下载所见及所得(全部文件及完整目录)

    总的来说,这个实例是一个实践性的教程,涵盖了Chrome扩展的多个核心概念,包括扩展结构、API使用、文件操作以及用户界面的互动。通过理解并学习这个实例,开发者可以进一步掌握Chrome扩展的开发技术,从而创建自己...

    入门示例chrome扩展:以下chrome扩展教程

    在本"入门示例chrome扩展"教程中,我们将深入理解如何构建一个基本的Chrome扩展。 首先,Chrome扩展由以下几个核心组件构成: 1. **manifest.json**:这是每个Chrome扩展的配置文件,它包含了扩展的基本信息,如...

    siyuan-chrome:思源的 Chrome 扩展

    思源Chrome扩展 :light_bulb: 介绍 思源的 Chrome 扩展。 :hammer_and_wrench: 设置 Chrome 网上应用店 开发版 在 Chrome 地址栏中输入chrome://extensions打开扩展管理页面 打开右上角的“开发者模式”,然后点击...

    ChromeExtension:Google Chrome 扩展教程的存储库

    总的来说,"ChromeExtension-master"存储库提供了学习Chrome扩展开发的实践案例,涵盖了从基础概念到高级特性的广泛内容。通过深入研究这个项目,你可以掌握创建自定义Chrome功能的技能,理解JavaScript在浏览器环境...

    chrome插件开发文档

    ### Chrome插件开发知识点详解 #### 一、Chrome插件基础概述 ...通过以上对Chrome插件开发的基础教程和API的解析,以及示例代码的分析,开发者可以更好地理解如何从零开始构建一个功能完善的Chrome插件。

    chrome-extension-codelab:https

    【标题】:“Chrome扩展开发教程:HTTPS应用实践” 在 Chrome 扩展开发中,HTTPS 是一个重要的主题,因为它涉及到浏览器安全性和数据传输的加密。Chrome 扩展是用于增强或改变 Google Chrome 浏览器功能的小型软件...

    JavaScript开发Chrome扫瞄器扩展程序UI的教程_.docx

    首先,我们需要了解Chrome扩展的基本文件结构。manifest.json文件是扩展的核心,它包含了所有必要的元数据和权限设置。例如,一个简单的manifest.json示例会定义扩展的名称、版本、所需权限,以及背景页或弹出窗口的...

Global site tag (gtag.js) - Google Analytics