65.9K
CodeProject 正在变化。 阅读更多。
Home

Codeproject 论坛日期 - Google Chrome 扩展

Fabio V Silva
starIconstarIconstarIconstarIconstarIcon

5.00/5 (2投票s)

2011 年 4 月 18 日

CPOL

3分钟阅读

viewsIcon

26236

downloadIcon

270

一个 Google Chrome 扩展程序，用于更改 CodeProject 论坛中时间/日期的显示

difference.png

引言

本文是我尝试学习 Google Chrome 扩展程序原理的结果。

它展示了如何组合一个非常简单的扩展程序，该扩展程序可以使用 jQuery 更改所需网页的内容——在本例中是论坛中使用的时间显示格式。

背景

构建扩展程序所需的信息可以在 Google Chrome 扩展程序页面上找到。 有关 jQuery 的信息，请参见此处。

Chrome 扩展程序

Google Chrome 扩展程序只不过是文件（HTML、CSS、Javascript 以及您需要的任何其他内容）的集合，它们可以向浏览器添加功能。 扩展程序可以访问网页或服务器，并且可以与浏览器功能（如书签和标签页）进行交互。 扩展程序 UI 以 HTML 页面的形式呈现，其中可以包含任何所需的内容。 扩展程序还可以添加到 Chrome 上下文菜单并具有选项页面。 页面和后台脚本都可以利用所有浏览器功能，例如 HTML5、WebKit、JSON。

Google 在记录其 API 方面做得非常好，您可以在其 Labs 的 Google Chrome 扩展程序网站上找到所需的所有信息。 提供了许多示例。 另一个非常好的示例可以在 CodeProject 的这篇文章中找到。

清单文件

清单文件是 JSON 格式的，必须命名为“manifest.json”。

Chrome 在这里获取运行扩展程序所需的信息，即后台页面、内容脚本、要使用的图标以及扩展程序所需的权限。

以下是此扩展程序使用的清单文件

{
  "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": ["https://codeproject.org.cn/*"],
      "js": ["jquery-1.4.1.js", "myscript.js"]
    }],
  "permissions": [
    "tabs"
  ]
}

前三个值是不言自明的。

“background_page”部分定义了一个在扩展程序进程中运行的页面，并且只要扩展程序存在就一直运行。 如果您需要更新状态，这将非常有用，在我们的例子中，此页面将根据我们是否位于 CodeProject 域中，显示或隐藏扩展程序图标（在多功能框中的书签图标旁边）。

<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

这称为“页面操作”，而不是“浏览器操作”，后者的图标显示在多功能框外部，例如，上图中 AdBlock 扩展程序的图标。

“content_scripts”部分定义了在与“matches”属性匹配的网页内运行的 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 可以极大地促进网页的操作。

此脚本使用 jQuery 选择器来遍历网页中所有类为“Frm_MsgDate”的 DOM 对象，在 CodeProject 论坛中，这些对象是保存消息时间/日期的 HTML 元素，然后对其内容进行必要的转换，以给出所需的结果。

加载扩展程序

下载包含的文件并将其提取到文件夹后，您需要做的就是选择 Chrome 上的“工具”，然后选择“扩展程序”菜单。 展开开发者模式会显示一个“加载已解压的扩展程序...”命令，您可以选择清单文件所在的文件夹。 现在您可以导航到 CodeProject 论坛并查看差异了。

从这里

这是一个非常简单的项目，用于学习 Chrome 扩展程序的原理，因此我确信它还有改进的空间。 我接受任何建议，如果您希望看到此扩展程序得到扩展，请随时发表评论。 我本打算在鼠标悬停在用户名上时创建一个用户详细信息弹出窗口，但 CodeProject 在这方面领先于我。 :)

未打包的扩展程序仅适用于开发场景。 可以打包该扩展程序，然后将其托管在任何 Web 服务器或 Google 扩展程序库上。

历史

  • 2011 年 4 月 18 日：初始发布
© . All rights reserved.