第一个 Chrome 扩展

作者: SingleDiego | 来源:发表于2018-05-22 17:26 被阅读26次

知识点：

browser_action

首先新建一个名为 my_clock 的文件夹，在此文件夹中新建一个名为 manifest.json 的文件，内容如下：

{
    "manifest_version": 2,
    // 扩展的名称
    "name": "我的时钟",
    // 扩展的版本
    "version": "1.0",
    // 扩展的描述
    "description": "我的第一个Chrome扩展",
    // 扩展相关图标文件的路径
    "icons": {
        "16": "images/icon.png",
        "48": "images/icon.png",
        "128": "images/icon.png"
    },

    // 指定扩展的图标放在Chrome的工具栏中
    "browser_action": {
        // 定义了相应图标文件的路径
        "default_icon": {
            "19": "images/icon.png",
            "38": "images/icon.png"
        },
        // 定义了当用户鼠标悬停于扩展图标上所显示的文字
        "default_title": "我的时钟",
        // 定义了当用户单击扩展图标时所显示的html文件路径
        "default_popup": "popup.html"
    }
}

接下来我们开始编写 popup.html：

<html>

<head>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        width: 250px;
        height: 300px;
    }

    div {
        line-height: 100px;
        font-size: 42px;
        text-align: center;
    }
    </style>
</head>

<body>
    <div id="clock_div"></div>
    <script src="js/my_clock.js"></script>
</body>

</html>

如果你曾经编写过网页，会发现上面这个页面省略了很多内容，比如 <title> 标签。因为对于 Chrome 扩展来说，很多对网页有意义的内容是无意义的，所以我们可以只挑需要的写，当然你全写出来也不会有什么问题。

上面的这个页面首先定义了全局元素的 margin 和 padding 为 0，这样我们可以更加自由地控制元素的外观。

在编写网页时，body 的尺寸往往不会专门给定，但对于 Chrome 扩展有时这是必要的，比如此例中我们需要告诉 Chrome 当用户单击扩展图标后展示一个多大的界面。

之后我们在 body 标签中定义了一个 id 为 clock_div 的 div 容器，用这个容器来显示当前的时间，这样我们就把 HTML 的布局写好了。

接下来我们就需要引入 JavaScript 处理数据并动态显示了。值得注意的是 Chrome 不允许将 JavaScript 代码段直接内嵌入 HTML 文档，所以我们需要通过外部引入的方式引用 JS 文件。

当然 inline-script 也是被禁止的，所以所有元素的事件都需要使用 JavaScript 代码进行绑定，如果你没有使用一个拥有强大选择器的库（如 jQuery），最好给需要绑定事件的元素分配一个 id 以便进行操作。

下面来编写 my_clock.js 文件：

function my_clock(el){
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    m=m>=10?m:('0'+m);
    s=s>=10?s:('0'+s);
    el.innerHTML = h+":"+m+":"+s;
    setTimeout(function(){my_clock(el)}, 1000);
}

var clock_div = document.getElementById('clock_div');
my_clock(clock_div);

在 my_clock.js 文件中我们定义了一个 my_clock() 函数用于显示时间，这个函数包含了一个 el 参数，这个参数为显示时间的容器。

由于在 HTML 文档中我们设计在 id 为 clock_div 的 div 容器中显示时间，所以调用 my_clock() 函数时我们传入了这个容器，在 js 文件中用变量 clock_div 表示。之后 my_clock 函数 1000 毫秒之后又会再次调用自身，这样 clock_div 中显示的时间就会被更新。

至此这个扩展就编写完毕了，当然别忘了将图标文件也放入相应的文件夹中。