chrome 插件–B站自动发弹幕

感觉网上关于插件开发的文章不多，其实插件开发很简单，也很方便。比起 selenium 解析网页，用 javascript 代码直接嵌入浏览器要方便很多。本文介绍了一个简单的自动发弹幕的例子，其实用插件做爬虫也是可行的。插件本地存储可以用 localStorage 先把爬取的资源链接存好，然后做个页面用表格展示，表格另存到本地，再用 python 程序直接访问链接。

自动发弹幕这个例子只需要三个文件，manifest.json ,background.js ,Bw.png (插件图标）。

manifest.json 文件代码：

1. {
2. “manifest_version”: 2,
3. “name”: “弹幕助手”,
4. “description”: “自动填充弹幕”,
5. “version”: “1.0”,
6. “permissions”: [
7. “tabs”, “http://*/plus/flink_add.php”, “https://*/plus/flink_add.php”
8. ],
9. “background”: {
10. “scripts”: [“background.js”]
11. },
12. “browser_action”: {
13. “default_title”: “自动填充弹幕”,
14. “default_icon”: “Bw.png”
15. }
17. }

background.js 文件代码：

1. // Copyright (c) 2011 The Chromium Authors. All rights reserved.
2. // Use of this source code is governed by a BSD-style license that can be
3. // found in the LICENSE file.
5. // Called when the user clicks on the browser action.
7. var sleep = function(time) {
8. var startTime = new Date().getTime() + parseInt(time, 10);
9. while(new Date().getTime() < startTime) {}
10. };
12. function checkURL(url){
13. console.log(‘URL:’+url);
14. var flag = false;
15. if(typeof url == “undefined” || null == url)
16. url = window.location.href;
17. // var regex = /.*\:\/\/.*\/form.php/;
18. var regex = /https\:\/\/.*bilibili\.com.*/;
19. var match = url.match(regex);
20. if(typeof match != “undefined” && null != match)
21. flag = true;
22. return flag;
23. }
26. function autoAddValue()
27. {
28. chrome.tabs.executeScript(null,
29. // 直接修改 input 的 value 值可能会引发问题。因为浏览器会认为程序自动输入的值是输入框的默认值，认为用户并没有输入文字！
30. {code:” var input = document.querySelectorAll(‘input.bilibili-player-video-danmaku-input’)[0]; \
31. var playbutton = document.querySelectorAll(‘div.bilibili-player-video-state’)[0];\
32. var ClickDiv = document.querySelectorAll(‘div.bilibili-player-video-btn-send’)[0]; \
33. \
34. function fireClick(node){ \
35. if (document.createEvent) {\
36. var evt_m = document.createEvent(‘MouseEvents’);\
37. evt_m.initMouseEvent(‘click’, true, false);\
38. node.dispatchEvent(evt_m); \
39. } else if(document.createEventObject) {\
40. node.fireEvent(‘onclick’) ; \
41. } else if (typeof node.onclick == ‘function’) {\
42. node.onclick(); \
43. }\
44. }\
45. function inputValue(dom, st) {\
46. var evt = new InputEvent(‘input’, {\
47. inputType: ‘insertText’,\
48. data: st,\
49. dataTransfer: null,\
50. isComposing: false\
51. });\
52. dom.value = st;\
53. dom.dispatchEvent(evt);\
54. }\
55. \
56. fireClick(playbutton);\
57. inputValue(input, ‘这个视频我看了好多遍了，讲得好。’);\
58. function bullet(){\
59. setInterval(function(){ \
60. fireClick(ClickDiv); \
61. console.log(\”点击一下\”);\
62. }, 9000);\
63. }\
64. setTimeout(\”bullet()\”, 5000 );\
65. “});
66. }
68. var countUpdate = 1;
70. chrome.browserAction.onClicked.addListener(function(tabId,changeInfo,tab){
71. countUpdate = 1;
72. });
74. chrome.tabs.onCreated.addListener(function(tabId,changeInfo,tab){
76. if(checkURL(tab.url)){
77. countUpdate = 1;
78. }
79. })
81. chrome.tabs.onUpdated.addListener( function(tabId,changeInfo,tab){
83. if(countUpdate==2){
84. sleep(5000);
85. if(checkURL(tab.url))
86. {
87. autoAddValue();
88. chrome.tabs.executeScript({
89. code: ‘document.body.style.backgroundColor=”#f2d649″;console.log(‘+countUpdate.toString()+‘);’ // 黄色
90. });
91. }
92. else
93. {
94. console.log(‘不是bilibili网站！’); // 这个无法显示在页面上，因为不是同一个页面。
95. chrome.tabs.executeScript({
96. code: ‘document.body.style.backgroundColor=”#f24182″‘ // 红色
97. });
98. }
99. }
100. countUpdate = countUpdate + 1;
101. });
103. // https://www.bilibili.com/video/BV1Ht411y73G?p=4

background.js 就是从浏览器启动一直在后台运行的东西。这个文件的功能是，如果网页是B站播放页面就把背景改为黄色，否则红色。在弹幕输入框输入“这视频很好…..”这句话，然后每9s发送一次。注意，输入文本和点击都必须发送事件，input 直接修改 value 属性是没用的。

把三个文件放在一个文件夹下，打开浏览器扩展页的开发者模式，把文件夹拖入扩展页，安装完成。

如果想了解插件还有什么其他的能力，访问  Chrome插件（Extensions）开发攻略 。