chrome extension(2)

最新推荐文章于 2023-10-23 14:31:49 发布

felixs

最新推荐文章于 2023-10-23 14:31:49 发布

阅读量2.6k

点赞数

分类专栏： browser 浏览器技术趋势 WebApp 技术 Chromium 前端

技术同时被 3 个专栏收录

245 篇文章 0 订阅

订阅专栏

Chromium

39 篇文章 2 订阅

订阅专栏

技术趋势

23 篇文章 0 订阅

订阅专栏

可以直接参考http://chromeextensionsdocs.appspot.com/extensions/getstarted

开发第一个chrome扩展

转自：http://blog.csdn.net/tango991820/article/details/8129702

如何开始

第一步

根据使用的用途和产品特征，来选择扩展的表现形式：

接口	表现	介绍
page action	地址栏图标，点击打开新tab页面或内容注入	适用于只对少数页面有意义的特征（比如RSS订阅）。
browser action	工具栏图标，点击打开一个popup层或新tab页面	适用于多数页面有意义的特征（比如我常用代码格式化工具jsbeautifier）。
app	应用程序列表，点击打开内置tab页面或任意域名的新网页	为了获得最佳体验（比如全屏、桌面快捷方式、任务栏图标），或者兼容其他浏览器（部署到自己的服务器上，比如'wordsquared.com'应用）。

* 关于google官方推荐用browser action的原因是如果把扩展脚本注入到所有页面，将会显著影响原有页面的性能。

** 另外，更主要的原因是，chrome扩展目前没有提供没有类似于firefox的，可以上所有页面上悬浮的widget层。

*** browser action的popup.html限制了展示大小，只能约为800x600像素。

第二步

建立扩展所需的文件夹，在下面放置manifest.json文件——里面申明插件的表现形式，依赖文件等等。

page action的示例：

{
  "name": "My Extension",
  "version": "0.4.0",
  "icons" : {
      "16": "icon.png",
      "48": "icon48.png",
      "128": "icon128.png"
  },
  "description": "My first chrome extension.",
  "page_action": {
      "default_title": "在些页面启用",
      "default_icon": "foo.png",
      "default_popup": "html/popup.html"
  },  
  "background_page": "html/background.html",
  "options_page": "options/index.html",
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "run_at": "document_idle",
      "css": ["css/style.css"],
      "js": ["js/foo.js","js/bar.js"]
    }
  ],
  "permissions": [
    "tabs",
    "notifications",
    "idle",
    "http://*/",
    "https://*/"
  ]
}

你的目录对应的是浏览器中的 'chrome-extension://{extensionId}/'根目录。

content scripts是page action将注入到特定页面中的脚本，permissions授权它可以在哪些条件下执行。

options page是扩展的设置页面。

对于扩展，background page 定义的html页面必须的并且是最重要的。在浏览器开启后，扩展本身在这个后台页面上运行。

backgroun page可以使用所有的chrome.* api，在它之外的扩展页面需要使用 chrome.extension.getBackgroundPage() 来与它通讯；而浏览器中页面不能访问它，只有content scripts可以通过chrome.extension.sendRequest()与它通讯。

图示1：page action、browser action与content scripts的区分

* content scripts被注入了原有页面中，修改了DOM。

图示2：dom、原有脚本与content scripts联系示意

* 原有脚本与content scripts在不同的环境中，不能直接通讯；可能存在多个content scripts（不同扩展注入的）,它们互相也是隔离的；但是DOM是共享的，因此可以由DOM来共享数据、共享事件通知。

第三步

搭建完扩展的基础结构之后，就可以在chrome中测试它。

点击chrome的“选项/工具/扩展程序”，在新打开的页面中，打开“开发人员模式”，然后就出现了：“载入正在开发的扩展程序...”按钮，点击它即可选择你的扩展目录以开始测试。

Snippets

如何保持打开的tab唯一
[javascript] view plain copy
1. <code class="chili-lang-javascript" style="margin:0px; padding:0.5em; font-family:Monaco,'Bitstream Vera Sans Mono',Consolas,'Lucida Console',monospace; color:rgb(101,123,131); border:none; font-size:14px; line-height:1.4; display:block">var option_url = chrome.extension.getURL('options/index.html');
2. chrome.tabs.getAllInWindow(null,function(tabs){
3. var option_tab = tabs.filter(function(t) { return t.url === option_url });
4. if(option_tab.length){
5. // 已经打开，直接激活
6. chrome.tabs.update(option_tab[0].id,{selected:true});
7. }else{
8. chrome.tabs.create({url:option_url,selected:true})
9. }
10. });
11. </code>
回到指定窗口的指定tab:
[javascript] view plain copy
1. <code class="chili-lang-javascript" style="margin:0px; padding:0.5em; font-family:Monaco,'Bitstream Vera Sans Mono',Consolas,'Lucida Console',monospace; color:rgb(101,123,131); border:none; font-size:14px; line-height:1.4; display:block">// todo: 保存一个tab引用，或者仅仅是tabId和windowId
2. var tab = foo;
3. chrome.windows.get(tab.windowId,function(win) {
4. chrome.windows.update(win.id,{focused:true});
5. chrome.tabs.update(tab.id,{selected:true});
6. })
7. </code>
前台tab页面通知backgroundPage:
```
var key = 'some_method',parameters = {};
chrome.extension.sendRequest({ report : key, parameters : parameters }, callback);
```

backgroundPage通知tab页面方式，脚本注入：

// 执行一个文件
chrome.tabs.executeScript(tabId, { file: 'foo.js' });
// 一段代码
chrome.tabs.executeScript(tabId, { code: 'alert(1)'} );
// 另，插入CSS方法，参数与上面类似
chrome.tabs.insertCSS(tabId, { file: 'foo.css' });

通过localStorage存储扩展配置

localStorage['member'] = JSON.stringify({username:'ambar'})

往特定tab页中的扩展发送一个请求：

// 第二个参数完全自定义
chrome.tabs.sendRequest(tab.id, { foo:true, any_other_params:'' });

桌面通知有两种格式：HTML和纯文件，具体API
[javascript] view plain copy
1. <code class="chili-lang-javascript" style="margin:0px; padding:0.5em; font-family:Monaco,'Bitstream Vera Sans Mono',Consolas,'Lucida Console',monospace; color:rgb(101,123,131); border:none; font-size:14px; line-height:1.4; display:block">// html式，可以简单的用查询变量传递参数
2. var notify_html = function(icon,title,message) {
3. var encode = encodeURIComponent;
4. var notification = webkitNotifications.createHTMLNotification(
5. chrome.extension.getURL(
6. 'html/notification.html?message='+encode(message)
7. +'&title='+encode(title)
8. +'&icon='+encode(icon)
9. )
10. );
12. notification.show();
13. };
15. // 文本格式，可以设置一个图标和标题
16. var notify_plain = function(icon,title,message) {
17. var notification = webkitNotifications.createNotification(
18. chrome.extension.getURL('notification.png')
19. ,title
20. ,message
21. );
22. notification.show();
23. // 显示完之后5秒关闭
24. notification.ondisplay = function(e) {
25. setTimeout(function() { notification.cancel(); }, 5000);
26. }
27. }</code>

felixs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
chrome extension(2)

开发第一个chrome扩展转自：http://blog.csdn.net/tango991820/article/details/8129702如何开始第一步根据使用的用途和产品特征，来选择扩展的表现形式：接口表现介绍page action地址栏图标，点击打开新tab页面或内容注入适用于只对少数
复制链接

扫一扫