Codeproject论坛日期 Google Chrome 扩展

分享于 

5分钟阅读

Web开发

  繁體
difference.png

介绍

这篇文章是我尝试学习 Google Chrome 扩展的原理的结果。

它演示了如何将一个非常简单的扩展放在一个可以改变所需网页的内容的情况下。

背景

可以在 Google Chrome 扩展页面上找到构建扩展所需的信息。 有关jQuery的信息,请参见这里的

Chrome 扩展

一个 Google Chrome 扩展不仅仅是一个文件的Collection - HTML,CSS,Javascript和任何你需要的,它将功能添加到浏览器。 扩展可以访问网页或者服务器,并且可以与浏览器功能( 如书签和标签) 交互。 扩展界面以HTML页面的形式呈现,可以包含任何所需的内容。 扩展也可以添加到 Chrome 上下文菜单中,并有一个选项页。 页面和 background 脚本都可以利用所有浏览器功能,比如。HTML5.webkit。JSON。

在 documenting documenting网站网站网站Google做了很好的documenting,你可以找到你所需要的所有资料。 提供了大量样本。 另一个很好的示例可以在上找到,。

Manifest 文件

Manifest 文件是json格式的,必须命名为" manifest.json"。

这就是 Chrome 获取扩展。换句话说,。background 页。内容脚本。使用的icon 和扩展所需权限所必需的信息。

以下是用于这里扩展的Manifest 文件:

{
 "name": "CodeProject Extension",
 "version": "1.0",
 "description": "A Codeproject extension",
 "background_page": "background.html",
 "page_action": {
 "default_icon": "icon.png",
 "default_title": "CodeProject Extension" },
 "content_scripts": [
 {
 "matches": ["http://www.codeproject.com/*"],
 "js": ["jquery-1.4.1.js", "myscript.js"]
 }],
 "permissions": [
 "tabs" ]
} 

这三个值是自我解释的。

" background_page"部分定义了在扩展过程中运行的页,只要扩展生活。 如果我们在页面中显示或者隐藏了这个扩展名,那么这就很有用了。

<html><head><script>function checkForValidUrl(tabId, changeInfo, tab) {
 if (tab.url.indexOf('www.codeproject.com')> -1) {
 chrome.pageAction.show(tabId);
 }
 }; 
 chrome.tabs.onUpdated.addListener(checkForValidUrl);
 </script></head></html>

page_icon.png

这称为"页面操作",而与 icon 显示在omnibar之外的"浏览器操作"相反,例如,上面图像中的in扩展 icon。

" content_scripts"部分定义了在匹配属性( 在本例中为)的网页上运行的JavaScript文件,在此情况下,所有以" www.codeproject.com/"。 我们加载jQuery脚本和实际修改网页内容的定制脚本。

" permissions"部分定义了运行脚本所必需的权限。

myscript.js

$('td[class="Frm_MsgDate"]').each(function (index) {
 var t = $(this).text();
 var hr = 0;
 var min = 0;
 if (t.indexOf("hr")> -1) {
 hr = t.substring(0, t.indexOf("hr"));
 t = t.substring(t.indexOf("hr") + 3);
 }
 if (t.indexOf("min")> -1) {
 min = t.substring(0, t.indexOf("min"));
 }
 if (hr> 0 | min> 0) {
 var d = new Date();
 d.setHours(d.getHours() - hr, d.getMinutes() - min, 0, 0);
 hr = d.getHours();
 min = d.getMinutes();
 if (d.getDay()!= new Date().getDay()) { min += " Yesterday"; }
 $(this).text(formatnum(hr) + ":" + formatnum(min));
 }
});function formatnum(i) {
 if (i <10) {
 i = "0" + i;
 }
 return i;
} 

jQuery可以极大地促进对网页的操作。

这个脚本使用,中的一类" Frm_MsgDate"对所有的DOM对象进行横向使用,然后对它的内容进行必要的转换。

加载扩展插件

下载包含的文件并将它们解压缩到文件夹之后,你需要做的就是选择"工具",然后在 Chrome 上的"扩展"菜单上进行加载。 扩展开发者模式显示"加载解压的扩展。"命令,它提供了选择 Manifest 文件所在文件夹的选项。 你现在可以导航到CodeProject论坛并查看。

从这里

这是一个非常简单的项目,学习 Chrome 扩展的原则,所以我相信,改进的房间。 我接受任何建议,如果你想看看扩展,请随时留言。 当鼠标停留在用户 NAME 上时,我打算创建一个用户详细信息,但是on在我的前面。 : )

解压的扩展仅适用于开发场景。 扩展可以打包然后托管在任何网络服务器或者Google扩展库上。

历史记录

  • 18th 2011年04月: 初始帖子

ext  for  CHR  chrome  日期  Google Chrome  
相关文章