Chrome扩大插件演习——书签治理

媒介

这是一篇关于Chrome扩大插件入门、Vue.js入门的小演习，功用是：在当前阅读的页面点击扩大图标，并点击保留以后，该页面就会存在你的新标签页中。实在就是一个可视书签的内容。
迎接人人指出代码的不足之处，许多时刻都是本身进修本身码代码，太须要他人的意见了。

Demo代码

代码戳这里

Chrome插件准备学问

起首给出一本参考的中文书本，在演习的历程中有帮到忙。固然，最威望的照样官方文档，只不过像我这类英文不太好星人只能拣本身看得懂的看了。别的另有官方文档的中文版，在英文版看不懂的时刻用。

• manifest.json

  这个文件实在就是你的扩大插件的一个说明书。来人，上代码！

  {
// 前三个必填
"manifest_version": 2,
"name": "bookmark",
"version": "1.0",
"description": "This extension shows bookmarks",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"chrome_url_overrides": {
"newtab": "main.html"
},
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["jquery-3.2.1.min.js", "html2canvas.js", "canvas2image.js","contentScripts.js"]
}
],
"permissions": [
"tabs"
]
}

  前三个必填的我不想说了，不过就是版本、称号之类的。


• browser_action

这一项是设置你的扩大在阅读器窗口上的小图标，以及点击这个图标弹出的页面的，你会发明文档的写法跟我有些不一样，由于我有点懒，如许写字数比较少，省事儿。同学们不要学我呦。

• chrome_url_overrides

  望文生义，重写chrome相干的页面。我这里要重写的是“new tab”，即新标签页，页面的内容进口在main.html。你还能够重写别的页面，比方书签治理页面等，能够参考文档

• content_scripts

中文翻译过来应该叫内容剧本，它能够运转在你指定的页面当中，能够拿到指定页面的一些信息。指定的页面就是“matches”这一项了。在本演习中，能够看到用正则匹配了一切页面，由于毕竟是要做书签嘛。“js”这一项是一个数组，内里放的就是你在指定页面里用的剧本，前三个都是依靠，末了一个contentScripts.js才是真正搞事变的剧本，注重依靠是有递次的噢，实在与在标签里引标签是一回事变。

但实在，我总觉得这么个小demo或许用不到内容剧本，然则程度有限，找不到更好的完成要领，期待大牛与我交换。


• permission

向chrome请求一些权限，这里我请求了tab 阅读器选项卡的权限，由于做书签时我须要当前tab的url。另有一些别的权限，请参考文档

思绪整顿

经由过程以上的说明书，应该大抵邃晓这个扩大插件是怎样回事了，接下来该斟酌怎样完胜利用。

• 起首，点击扩大图标，弹出一个页面（popup.html），这个页面有个保留按钮，点击这个按钮应该有响应的事宜处置惩罚函数，此函数的功用就是猎取我当前阅读页面的截图以及url等信息，能够写一个js剧本，即popup.js

拿到url的信息比较简朴，chrome.tabs这个API下有一些methods，检察文档发明chrome.tab.query能够query到当前的选项卡，胜利拿到页面的url和title

然则题目来了，popup.html虽然是在我当前阅读的窗口上弹出来的，然则是与当前页面自力，如何能猎取当前页面的截图呢？

假如你在仔细看之前的内容的话，如今头脑蹦出来的应该是——content Scripts!
没错，是它 是它 就是它！上文提到了，这个内容剧本能够运转在指定的页面当中，而且貌似能够拿到当前页面的dom构造，所以，能够在contentScripts.js中运用html2canvas插件拿到截图，而且用canvas2html把图片转成base64花样，至于为何要转成base64，就要想一想拿到这个截图以后干什么了

• 取得当前页面的截图以后，应该把它通报到我们重写的新标签页下（new tab，新选项卡），即main.html（所以转成base64是为了能把图片传到main.html，我发明只要如许通报才胜利），这个页面也应该有个剧本来吸收这个图片而且做一些处置惩罚，可取名为main.js

然后题目又来了，这几个页面完整自力，要怎样通报东西呢？所以接下去要引见的是chrome扩大页面间的通讯。

Chrome扩大页面间的通讯

在查阅这部份的材料时，还蛮头疼的。敕令有点多，而且比较长，关于我如许的懒人来讲简直是理不清。终究，许多东西不懂不懂，多看几遍也就摸出门道了。

• 先来理一理，须要收发音讯的剧本们。

  popup.js -> contentScripts.js -> main.js

• 查阅文档发明，发音讯有以下几种体式格局

  chrome.runtime.sendMessage({msg: msg})

  chrome.tab.sendMessage(tab的id, {msg: msg})

• 吸收音讯的要领

  chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){})
  发送者发来的对象都在request中，能够用request.msg读取
  你有须要发还的音讯时能够用运用sendResponse

接下来就把这几个发送和吸收的要领写到各自的剧本中啦。注重发送音讯到content Script，必需运用chrome.tabs.sendMessage。

• popup.js——chrome.tabs.sendMessage
• contentScripts.js——chrome.runtime.onMessage.addListener和chrome.runtime.sendMessage
• main.js——chrome.runtime.onMessage.addListener

至此，全部扩大插件的骨架都搭好了。
最前面是不是是提到了Vue,好吧实在一开始我是想做个vue的demo来进修进修vue的，只是没想到这个扩大页面上的东西太简朴，反而在进修Chrome扩大开辟花了更多的时候。Vue.js的相干内容也有，就是太简朴了，人人能够去看看源码。

题目

• 截屏不是对一切页面都有用
• 只想对页面窗口大小的页面举行截屏，不知道该怎样做
• 是不是能够不运用html2canvas这类插件来完成截屏的结果

题目解决

关于截屏这个题目，终究找到了准确的要领。实在近在眼前，怪我没仔细看文档。

• chromes.tabs.captureVisibleTab 便能够截取可见页面

虽然运用html2canvas要领烦琐，但也协助我邃晓了chrome扩大间的通讯要领，塞翁失马♪(＾∀＾●)ﾉ