Chrome 插件页面美化及右键搜索小功能

Chrome拓展（插件）入门篇介绍了拓展基本概念、配置清单manifest.json以及清单中的action字段

Chrome 预算管理插件 篇通过一个插件介绍 background、permissions、icons、options_page 字段以及相关联的Chrome API的使用

本篇对上一个预算管理插件进行页面优化 和 使用chrome.tabs API添加一个实用的搜索功能

添加设置页面样式

首先美化设置页面，添加一些样式让它看起来简单美观

添加搜索功能

由于搜索会打开新标签页，所以首先需要在权限“permissions”字段加上“tabs”字段用来声明权限.

{
  "permissions": [
    "tabs"
  ]
}

chrome.tabs API 可以用来创建、修改和改变 浏览器中的标签。

首先在右键菜单中添加搜索选项

let MenuMyRight = {
    "id": "search",
    "title": "Goobe搜索",
    "contexts": ["selection"]
};

// 当应用被安装时将菜单项添加到 Chrome 的右键菜单中
chrome.runtime.onInstalled.addListener(function () {
    // 添加搜索菜单
    chrome.contextMenus.create(MenuMyRight);
});

单击右键 菜单项时触发事件

// 单击上下文菜单项时触发事件
chrome.contextMenus.onClicked.addListener((clickData) => {
    // 右键搜索
    if (clickData.menuItemId == "search" && clickData.selectionText) {
        var wikiUrl = "https://goobe.io/search.aspx?k=" + fixedEncodeURI(clickData.selectionText);
        var createData = {
            "url": wikiUrl
        };
        chrome.tabs.create(createData);
    }
}

encodeURI() 函数通过将特定字符的每个实例替换为一个、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码

效果演示：

源码： https://gitee.com/googlh/budget-manager