体验Chrome扩展的开发

Chrome浏览器为什么受人欢迎，它强大的扩展功能（Extensions）绝对是一个重要加分项，它有着大量扩展资源，使得人们在使用浏览器时更加得心应手，那么这么神奇的功能是怎么开发的呢？

---

创建自己的扩展

首先是，最重要的一步，新建文件夹起名Demo(名字随意)

在这个文件夹内新建一个文件manifest.json(文件名和格式不能有误)

{   
  "manifest_version": 2,    
  
  "name": "demoN",
  "description": "A extension demon.",
  "version": "1.0"
  
}

ok，这样你就有了一个你自己的扩展了（虽然它目前什么也没有，但它确实是你的）

注意！自2022年1月22日，谷歌商店不再接受manifest_version为2版本的扩展了，感兴趣的读者请切记学习版本3 About Manifest V2 - Chrome Developers

接下来打开Chrome浏览器->设置->扩展程序，你也可以在地址栏内输入（chrome://extensions/） 直接跳转

左上角有个打包扩展程序，将你的新建文件夹Demo打包，会生成.crx和.pem文件，.crx拖入扩展程序页面即可完成扩展的安装（前提是要有证书），当然我们目前是没有证书的，证书可能是要注册并发布才能获得，不过我们可以打开开发者模式，将新建文件夹Demo拖入扩展程序页面也可完成安装（PS.当有自动安装失败的扩展时，可在网络上搜索它的安装包，下载解压后将它的文件夹或.crx文件拖入扩展程序页面完成安装）

现在我们就能在扩展程序页面和浏览器右上角的扩展程序按钮找到它了

---

配置扩展

现在我们来对它做一些简单的配置

{   
  "manifest_version": 2,
  
  "name": "demo",
  "description": "This extension demonstrates a browser action with kittens.",
  "version": "1.0",
  
  "permissions": [
    "contextMenus"    //这个扩展能使用右键菜单权限
  ],
  "browser_action": {
    "default_icon": "democrat.png",    //显示在右上角的图标
    "default_popup": "popup.html"    //点击显示在右上角的图标弹出的页面
  },
  "omnibox": { "keyword" : "sousuo" },    //在地址栏输入'sousuo'触发搜索建议
  "background":
    {
      "scripts": ["background.js"]    //后台
    }
}

popup.html和background.js文件都在新建文件夹Demo下

更全面详细的配置可以查阅官方文档 Manifest file format - Chrome Developers

现在就来看看我们的配置带来了哪些影响吧

---

效果展示

先看browser_action，它指的是在页面右上角的扩展程序中的设置，我们为它设置了图标，制定了HTML，那么就可以看到它的图标，并在点击它之后出现一个页面

再看background和permissions，前者代表了一个一直在后台运行的文件后者代表了扩展的权限，如代码所示，这个扩展获取了右键菜单的权限，有了这个权限，我们在该扩展可用的页面上，可以使用该扩展设置的右键菜单功能，在background.js中写入下面代码

chrome.contextMenus.create({
	title: "测试右键菜单",
	onclick: function(){alert('您点击了右键菜单！');}
});

即可看到我们的扩展成功获取了右键菜单的权限，如果你在background.js中再创建一个按钮，它们会合并归纳于你的扩展

接下来是个非常有趣的功能，搜索建议，我们在manifest.json设置了关键字为'sousuo'，那么我们在地址栏里输入'sousuo'，点击放大镜图标就可触发，通过这个功能可以为我们这个插件的受众提供他们喜欢的搜索建议，实现代码放在文末

相关API可查看这里 chrome.omnibox - Chrome Developers

可以看到Chrome扩展也是一样具有很多的想象空间和操作空间，也非常期待这份空间能在人们的创造下展现出更多有趣、神奇的玩意

---

以下代码写在background.js中，代码来自网络

chrome.omnibox.onInputChanged.addListener((text, suggest) => {
  console.log('inputChanged: ' + text);
  if(!text) return;
  if(text == '微博') {
    suggest([
      {content: '新浪' + text, description: '新浪' + text},
      {content: '腾讯' + text, description: '腾讯' + text},
      {content: '搜狐' + text, description: '搜索' + text},
    ]);
  } else {
    suggest([
      {content: '百度搜索 ' + text, description: '百度搜索 ' + text},
      {content: '谷歌搜索 ' + text, description: '谷歌搜索 ' + text},
    ]);
  }
});

// 当用户接收关键字建议时触发
chrome.omnibox.onInputEntered.addListener((text) => {
    console.log('inputEntered: ' + text);
	if(!text) return;
	var href = '';
    if(text.startsWith('百度搜索')) href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text.replace('百度搜索 ', '');
	else if(text.startsWith('谷歌搜索')) href = 'https://www.google.com.tw/search?q=' + text.replace('谷歌搜索 ', '');
	else href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text;
	openUrlCurrentTab(href);
});
// 获取当前选项卡ID
function getCurrentTabId(callback)
{
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
    {
      if(callback) callback(tabs.length ? tabs[0].id: null);
    });
}

// 当前标签打开某个链接
function openUrlCurrentTab(url)
{
  getCurrentTabId(tabId => {
    chrome.tabs.update(tabId, {url: url});
  })
}