rmb122's notebook

开发一个简单的 Chrome 拓展

发表于 2018 年 6 月 14 日

每次复制域名时都会被 Chrome 复制地址时的 https:// 烦到, 所以干脆自己写个拓展来解决这个问题. Chrome 拓展其实就是一个小网页, 也就是 HTML, 所以我们可以用 JavaScript 来实现获取域名和复制的操作. 具体实现如下.

 1function callback(tab) {
 2    let url = tab.url;
 3    let parser = document.getElementById("parser");
 4    parser.href = url;
 5    let hostname = parser.hostname;
 6    let text = document.getElementById("text");
 7    text.setAttribute("value", hostname);
 8    text.select();
 9    document.execCommand("copy");
10}
11
12function getHostName(url) {
13    chrome.tabs.query({
14        active: true,
15        windowId: chrome.windows.WINDOW_ID_CURRENT
16    }, function (tabs) {
17        if (tabs && tabs[0]) {
18            callback(tabs[0]);
19        }
20    });
21}
22
23window.onload = getHostName

通过 window.onload 加载函数, 在 popup (地址栏右边的小图标点击后的页面) 弹出时自动将域名复制到粘贴版上. 关于获得当前页面 url, 因为 popup 自己就是个单独的页面, 与使用者当前浏览的隔离, 所以不能通过 chrome.tabs.getCurrent 来获得, 最后在 segmentfault 上找到了大神的答案, 通过 query 函数来得到当前页面的 url, 然后调用 callback 函数. 接下来就是从 url 中解析得到 hostname 也就是域名, 不过 JavaScript 并没有现成的函数, 我们也没必要因为此就直接加载个第三方库, 所以我们可以设置 DOM 的 href 属性后通过 hostname 属性间接得到域名 (不知道为什么 JavaScript 不直接搞个函数算了233), 然后通过 document.execCommand 来复制 select 中的域名即可. 接下来就是 manifest.json, 不过有完整的文档, 弄起来比较容易

 1{
 2      "name": "Get-hostname",
 3      "version": "1.0",
 4      "manifest_version": 2,
 5      "description": "Get hostname of current website.",
 6      "icons": {
 7           "16": "icon16.png",
 8           "48": "icon48.png",
 9           "128": "icon128.png" 
10        },
11      "browser_action": {
12          "default_icon": "icon48.png",
13          "default_popup": "main.html"
14        },
15      "content_security_policy": "policyString",
16      "incognito": "spanning",
17      "key": "publicKey",
18      "offline_enabled": true,
19      "permissions": ["tabs"]
20    }

最后加上 main.html 和 CSS 来装饰下就完美了.
PS: CSS 来自 button

1<input id="text" class="text">
2<a id="parser" type="hidden"></a>
3
4<script src="main.js"></script>
5<link rel="stylesheet" href="main.css">

 1.text {
 2    color: #666;
 3    background-color: #EEE;
 4    border-color: #EEE;
 5    font-weight: 300;
 6    font-size: 16px;
 7    font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 8    text-decoration: none;
 9    text-align: center;
10    line-height: 40px;
11    height: 40px;
12    width: 240;
13    margin: 0;
14    display: inline-block;
15    appearance: none;
16    cursor: pointer;
17    border: none;
18    margin-left: auto; 
19    margin-right: auto;
20    -webkit-box-sizing: border-box;
21       -moz-box-sizing: border-box;
22            box-sizing: border-box;
23    -webkit-transition-property: all;
24            transition-property: all;
25    -webkit-transition-duration: .3s;
26            transition-duration: .3s;
27}

最后效果如下

点开那个图标后当前域名就直接复制到剪贴板了, 终于可以摆脱该死的 https:// 了.