在 X浏览器中使用普通用户脚本

系列导航

TL;DR（快速上手）

新建脚本：设置 -> 用户脚本 -> 添加脚本 -> 新建脚本。
粘贴代码：将示例 JavaScript 代码粘贴到“JavaScript 代码区域”。
选择入口：工具菜单/长按菜单/主菜单/自动执行。
保存并运行：保存后，从对应入口执行脚本。

快速导航

示例：弹出浏览器信息
添加脚本到浏览器中
脚本的执行方式

经过上一篇文档我们已经对用户脚本有了初步了解，接下来我们通过一个实用的例子介绍如何在 X浏览器中使用普通用户脚本。假设我们有这么一个需求：希望方便地查询当前浏览器及页面相关的一些信息，比如当前窗口大小、当前页面 URL、浏览器 UA 等。我们可以通过下面这段 JavaScript 代码来实现此功能。

(function() {
	var info = "User Agent:\n" +  navigator.userAgent.toLowerCase() + 
      			 "\n\nBrowser Window Size:\n" + window.screen.width + "x" + window.screen.height + 
             "\n\nBrowser Language:\n" + navigator.language + 
             "\n\nTitle:\n" + document.title + 
			 "\n\nURL:\n" + document.location.href;
	alert(info);
 })();

添加脚本到浏览器中

我们可以通过下面的步骤把脚本添加到浏览器中，并决定以怎样的方式执行脚本。

1. 添加脚本

打开浏览器，进入设置 -> 用户脚本，点击“添加脚本”，选择“新建脚本”，填写脚本名称、简介等信息，并把上面的代码粘贴到 “JavaScript 代码区域”。

2. 设置脚本执行方式

我们可以根据脚本的应用场景来设定脚本的执行方式。本示例设置为通过“工具菜单”（浏览器右上角，或者通过主菜单的“工具箱”打开）来执行脚本。

3. 保存脚本

点击保存按钮，保存脚本，脚本列表会出现我们添加的脚本。

4. 执行脚本

如果我们设置了脚本的执行方式为“工具菜单”的话，脚本保存后我们的工具菜单列表中会新增一个执行脚本的入口，点击菜单选项后脚本就可以执行了。

脚本的执行方式

X浏览器支持为普通脚本设置不同的执行入口，我们可以根据使用场景以及用户习惯为脚本设置不同的执行方式。

执行方式	描述
工具菜单	在浏览器右上角的工具菜单新增选项作为脚本执行入口
长按菜单	在浏览器长按菜单中新增选项作为脚本执行入口
主菜单	在浏览器主菜单中新增选项作为脚本执行入口
自动执行	页面加载的时候自动执行，可以设置为在任意页面执行或者在特定域名执行。

下图展示了示例脚本分别以不同的菜单选项作为执行入口的效果。

常见问题（排错）

脚本找不到入口：请先确认脚本的“执行方式”设置为工具菜单/长按菜单/主菜单中的哪一种，对应入口才会出现。
选择了自动执行但没有生效：请检查是否设置了作用域（域名/网址），以及当前页面是否在作用域范围内。
脚本运行了但没有提示：建议先把脚本临时改成 alert("OK") 这类最直观的验证方式，确认执行链路正常后再恢复原逻辑。