123浏览器

浏览器脚本开发指南

阅读本指南之前，请希望阅读一下《123浏览器脚本介绍》，了解123浏览器脚本的基本背景。

浏览器脚本运行原理

123浏览器脚本其运行原理如下图所示：

123浏览器打开一个目标页面，通过正则表达式匹配到对应适合的浏览器脚本。
浏览器脚本把自己的 JavaScript 代码注入到 https://123.browser/ 这个虚拟的独立页面中运行。
浏览器脚本在 https://123.browser/ 中运行，还可以调用123浏览器定制扩充的私有 API，也可以与通过 API 与目标页面进行交互。

本地浏览器脚本与在线浏览器脚本

浏览器脚本分为 2 种，其功能能力是一样的，只是来源和存储不一样：

本地浏览器脚本是由浏览器用户自己开发和维护，脚本存储在用户本地磁盘文件中。代码开发能力强的用户，可以自己开发浏览器脚本，从而增强浏览器的功能。另外也可以把自己开发好的浏览器脚本，分享给其他的用户使用。
在线浏览器脚本是由三方其他网友开发和维护的，分享给其他用户，经过审核其功能和安全性提供给浏览器用户运行使用，不存储在用户本地。

用123浏览器打开 https://123llq.com/browser_script/list/ 页面，就可以“增删改查”管理用户自己本地浏览器脚本了。

开发一个下载 bilibili 视频的浏览器脚本示例

现在以开发一个下载 bilibili 视频的浏览器脚本为示例，介绍如何开发一个浏览器脚本。

假如我们要下载这个页面 https://www.bilibili.com/video/BV1ik4y1h7Wa/ 上的视频，我们在浏览器打开这个页面和对应的开发者工具，输入 __playinfo__ 和 __INITIAL_STATE__ 发现这里面包含了这个视频的信息和下载信息，如下图所示：

那我们浏览器脚本下载这个页面视频的思路是：

通过网络请求到这个页面源码
在页面源码里搜索 __playinfo__ 和 __INITIAL_STATE__ 信息。
找到对应的信息，并调用浏览器私有 API 下载音视频文件，必要时调用 ffmpeg 合并多个音视频文件为一个视频文件。

我们开始开发调试浏览器脚本。用123浏览器打开 https://123.browser/ 页面。后续浏览器脚本其实就是在这个页面上运行的，只有这个页面才有权限调用123浏览器提供的私有 API。

然后再打开这个页面的开发者调试工具，在 Console 里面输入 chrome.yesPrivate，这就是123浏览器提供的私有 API，如下图所示：

其浏览器脚本代码和注释如下：

(function() {
    var biz = {};
    biz.url = 'https://www.bilibili.com/video/BV1ik4y1h7Wa/';
    // 为后面的网络请求设置 header 信息，可以带上相关的浏览器 cookies
    biz.headers = [{'name':'Referer','value': biz.url}];
    biz.onDownloadPage =  function(is_ok, net_error, result) {
        if(is_ok) {
            // 通过正则表达式搜索下载到页面，找到 __playinfo__ 信息
            var pi = /window\.__playinfo__=({.+}).*<\/script><script>.*/.exec(result);
            biz.play_info = JSON.parse(pi[1])
            // 通过正则表达式搜索下载到页面，找到 __INITIAL_STATE__ 信息
            var is = /window\.__INITIAL_STATE__=({.+}).*;\(function\(\).*/.exec(result);
            biz.initial_state = JSON.parse(is[1])
            // 从 __INITIAL_STATE__ 里面提取到当前视频的 title
            var title = biz.initial_state.videoData.title;
            // 从 __playinfo__ 里面提取到当前视频的 真实的 audio 和 video 下载地址
            var audio_url = biz.play_info.data.dash.audio[0].base_url;
            var video_url = biz.play_info.data.dash.video[0].base_url;
            // 调用私有 api 创建一个浏览器下载项，分析下载视频的 audio 和 video链接，并最终合并成一个视频文件
            chrome.yesPrivate.createDownloadAudioVideo(title, biz.url, audio_url, video_url,biz.headers);
        } else {
            console.log(net_error);
        }
    };
    // 调用私有 api 发起网络请求，可以自定义 header
    chrome.yesPrivate.downloadString(biz.url, biz.headers, biz.onDownloadPage);
})();

浏览器脚本要求最好以 JavaScript 匿名函数的方式编写和运行。这是因为多个浏览器脚本都是运行在同一个 https://123.browser/ 页面。为了避免脚本之间的冲突和干扰，最好以匿名函数的方式编写和运行。

添加本地浏览器脚本

浏览器脚本开发好之后，可以在123浏览器里面打开 https://123llq.com/browser_script/add/ 页面，把脚本代码添加到浏览器中。如下图所示:

这个页面的几个字段：

名称。浏览器脚本的名称。后面会显示在工具栏浏览器脚本菜单上。
描述。详细介绍浏览器脚本的功能和信息。
url 域名。该浏览器脚本会匹配运行什么域名的页面。
url 正则。该浏览器脚本会匹配运行什么url的正则表达式。
脚本。浏览器脚本的 JavaScript 代码。

注意：我们之前开发的浏览器脚本代码中 biz.url = 'https://www.bilibili.com/video/BV1ik4y1h7Wa/'; 要替换成 biz.url = '{[(url)]}'; 这样的模板。因为浏览器脚本动态运行时，会把代码中的 {[(url)]} 替换成目前页面的真实 url：

添加完成之后，我们打开视频页面，运行浏览器脚本如下所示: