着手编写Chrome插件

Posted 2021-06-27 xhBruce

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了着手编写Chrome插件相关的知识，希望对你有一定的参考价值。

着手编写Chrome插件

Microsoft Edge -> 右上... -> 扩展 (浏览器地址输入：edge://extensions/或chrome://extensions)
在这里插入图片描述

第一个demo

chrome扩展开发中文教程
 https://developer.chrome.com/docs/extensions/ （科学上网）
https://github.com/GoogleChrome/chrome-extensions-samples

新建my_clock文件夹，并添加manifest.json

在这里插入图片描述
manifest.json：Chrome插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。

{
    "manifest_version": 2,
    "name": "demo",
    "version": "1.0.0",
    "description": "我的第一个 Chrome 扩展",
    "icons":
    {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
    "browser_action": 
    {
        "default_icon": "img/icon.png",
        "default_title": "我的时钟",
        "default_popup": "popup.html"
    }
}

点击browser_action或者page_action图标时打开的一个小窗口网页，焦点离开网页就立即关闭，一般用来做一些临时性的交互。

添加图标、popup.html、js文件

在这里插入图片描述
popup.html

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

        body {
            width: 200px;
            height: 100px;
        }

        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>

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);