写一个 chrome 插件来进行快速搜索知乎微博推特维基

为什么

有时候在网页上看到一个关键词，想要在知乎或者微博中搜索一下这个关键词，需要进行下面几个步骤：

1. 复制关键词
2. 新建浏览器 tab，打开知乎 or 微博，（sometimes 先打开百度，搜索出知乎 or 微博，再打开知乎 or 微博）
3. 粘贴关键词，回车，搜索

不算麻烦，但是也有好几个步骤。
chrome 浏览器选择关键词后右键可以搜索，但是不能指定去微博或者知乎或者 twitter 上去搜索。
所以写了个叫做 QSearch 的插件，一键选择搜索。

效果

效果如下，比方说我要在知乎或者维基百科中搜索 左派 这个词，选中，右键点击就行了。

右键搜索

来个动图。

搜索 左派 这个词

代码

代码比较简单，没做什么事情。
先写 manifest.json 定义一下文件。

// manifest.json
{
  "name": "QSearch",
  "version": "1.0",
  "description": "quick search! 快速搜索，右键选择文本，在知乎、微博、twitter，wikipedia 中搜索",
  "permissions": [
    "activeTab",
    "contextMenus"
  ],
  "background": {
    "page": "menu.html"
  },
  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
  "manifest_version": 2
}

写一个 menuConfig.js 文件配置一下各个网站的地址和 id 等。

// menuConfig.js
export default [
  {
    title: '知乎中搜索',
    parentId: 'QSearch',
    id: 'zhihu',
    contexts: [ "selection" ],
    urls: {
      default: 'https://www.zhihu.com/search?type=content&q=${keyword}'
    },
  },
  {
    title: '微博中搜索',
    parentId: 'QSearch',
    id: 'weibo',
    contexts: [ "selection" ],
    urls: {
      default: 'https://s.weibo.com/weibo/${keyword}',
    },
  },
  {
    title: 'twitter中搜索',
    parentId: 'QSearch',
    id: 'twitter',
    contexts: [ "selection" ],
    urls: {
      default: 'https://twitter.com/search?q=${keyword}',
    },
  },
  {
    title: '维基百科搜索',
    parentId: 'QSearch',
    id: 'wikipedia',
    contexts: [ "selection" ],
    urls: {
      default: 'https://en.wikipedia.org/wiki/${keyword}',
      en: 'https://en.wikipedia.org/wiki/${keyword}',
      zh: 'https://zh.wikipedia.org/wiki/${keyword}',
    },
  },
];

写一个 menu.js 文件来处理一下右键菜单，调用了 chrome 的 contextMenus 的 api。

// menu.js

import menus from './menuConfig.js';

// 是否包含中文，包含中文的，就去中文版维基搜索，不然去英文的
function containsChinese(text) {
  const reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
  return reg.test(text);
}

// 获取搜索链接
function getSearchUrl(urls, keyword) {
  const url = urls.zh && containsChinese(keyword)? urls.zh : urls.en || urls.default || '';
  return url.replace('${keyword}', keyword);
}

// 初始化右键菜单
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({ title: "QSearch", id: "QSearch", contexts: [ "selection" ] });
  const contextMenu = menus.map(m => {
    return { title: m.title, parentId: m.parentId, id: m.id, contexts: m.contexts };
  });
  contextMenu.forEach(menu => chrome.contextMenus.create(menu));
});

// 右键菜单点击事件
chrome.contextMenus.onClicked.addListener(info => {
  const keyword = info.selectionText;
  const select = menus.find(m => m.id === info.menuItemId);
  const url = getSearchUrl(select.urls, keyword);
  window.open(url);
});

然后写一个 menu.html 来作为入口，menu.html 会配置在上面的 manifest.json 中。

// menu.html
<script type="module" src="./menu.js"></script>

跑起来就完事了。
没打包上传到应用商店，因为并没什么卵用。