技术

使用谷歌浏览器本地插件进行研（mo）究（yu）

添加谷歌本地插件

新建一个插件文件夹，内有插件的配置文件manifest.json，基本结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "name": "name",
    "manifest_version": 2,
    "version": "1.0",
    "description": "description",
    "browser_action": {
    },
    "content_scripts": [
        {
            "matches": ["http://test.com/*"],
            "js": ["test.js"]
        }
    ]
}

其中name、version、description三个可以随意，manifest_version现在是固定写2就可以，browser_action里面可以配置在工具栏的图标、名字、链接等。

content_scripts可以配置生效的域名，以及加载的js代码。

然后使用谷歌浏览器加载插件就可以生效了（好像需要开发者模式）。

功能实现

初步想实现的功能就是用谷歌浏览器打开某个网站时，可以在左下角显示小窗，看看直播或者视频之类的。

起始页面是一个索引页，显示当前所有的已定的直播和视频。根据两个列表生成

1
2
3
4
5
6
7
8
9
10
11
12
var
lives = [
    {id: "7", name: "001"},
    {id: "8", name: "002"},
    {id: "9", name: "003"}
],
videoes = [
    {id: "5818395", name: "name1", page: 1},
    {id: "5818395", name: "name2", page: 2},
    {id: "5818395", name: "name3", page: 3},
    {id: "5818395", name: "name4", page: 4}
];

id作为唯一标示来生成页面结构，videoes里面的page是B站的分P。

生成的小窗就用fixed来定位，还准备了两个按钮，刷新和返回，方便操作，直播部分采用的是斗鱼的直播，参考网站的代码，生成代码：

1
videodom.innerHTML = '<embed width="' + vWidth + '" height="' + vHeight + '" allownetworking="all" allowscriptaccess="always" src="https://staticlive.douyucdn.cn/common/share/play.swf?room_id=' + liveid + '" quality="high" bgcolor="#000" wmode="window" allowfullscreen="true" allowFullScreenInteractive="true" type="application/x-shockwave-flash">';