javascript脚本_应用JavaScript：用户脚本

朱兴学

2023-12-01

javascript脚本

by Thomas Noe

通过托马斯·诺

应用JavaScript：用户脚本 (Applying JavaScript: User Scripts)

Writing a Userscript is a fun way to use your JavaScript skills. It takes you out of the editor into the browser with real time feedback and validation.

编写用户脚本是一种使用JavaScript技能的有趣方式。通过实时反馈和验证，您可以从编辑器进入浏览器。

什么是用户脚本？ (What is a user script?)

Userscripts (a.k.a User Scripts, User scripts, or .user.js) are open-source licensed add-ons for web browsers that change web pages as they are loaded. They give users the power to make websites do what they want them to, rather than what was originally intended.

用户脚本(aka用户脚本，用户脚本或.user.js)是Web浏览器的开源许可加载项，这些加载项会在加载网页时更改网页。它们使用户有能力使网站按照他们想要的去做，而不是最初的意图。

User scripts are written in JavaScript and allow you to tweak the look and feel of a webpage on your browser. The scripts only effect your browser, not the actual webpage.

用户脚本使用JavaScript编写，可让您在浏览器中调整网页的外观。这些脚本只会影响您的浏览器，而不会影响实际的网页。

快速警告 (A quick warning)

You should be aware of privacy issues when using userscripts, and should not install them from sources you do not trust. Userscripts can carry out actions on your behalf and can potentially access any information on a website you have access to, or that you enter into a website. They are often permitted to carry out functions that scripts on normal websites cannot, such as storing information on your computer and sharing it between website. Badly written userscripts could potentially also be exploited by malicious websites.

使用用户脚本时，您应该注意隐私问题，并且不应从您不信任的来源安装它们。用户脚本可以代表您执行操作，并且可以潜在地访问您有权访问的网站或您输入的网站上的任何信息。通常允许他们执行普通网站上的脚本无法执行的功能，例如在计算机上存储信息并在网站之间共享信息。错误编写的用户脚本也可能被恶意网站利用。

explanations taken from https://github.com/OpenUserJs/OpenUserJS.org/wiki/Userscript-Beginners-HOWTO

解释来自 https://github.com/OpenUserJs/OpenUserJS.org/wiki/Userscript-Beginners-HOWTO

为什么要使用用户脚本？ (Why user scripts?)

Free Code Camp has a lot of great real world projects that will enrich your skill set and portfolio. I personally like using the skills I have learned in JavaScript, jQuery, and CSS to modify my day to day browsing.

Free Code Camp有很多很棒的现实世界项目，它们将丰富您的技能和产品组合。我个人喜欢使用在JavaScript，jQuery和CSS中学到的技能来修改日常浏览。

Some User Scripts have been extremely popular and were made into browser extensions. An example of one would be the Reddit Enhancement Suite found at http://redditenhancementsuite.com/.

一些用户脚本非常流行，并被制成浏览器扩展。一个示例就是Reddit增强套件，网址为http://redditenhancementsuite.com/ 。

You too could use your user script as a base of a browser extension!

您也可以将用户脚本用作浏览器扩展的基础！

入门 (Getting started)

User scripts are run from browser extensions themselves. Grease Monkey (FireFox) was the pioneer add on to allow people to customize their browsing experience. Install the appropriate plug in for your browser.

用户脚本从浏览器扩展本身运行。 Grease Monkey(FireFox)是允许用户自定义其浏览体验的先驱添加项。为您的浏览器安装适当的插件。

For FireFox: Grease Monkey

对于FireFox： 油脂猴子

GreasemonkeyThe Development Channel lets you test an experimental new version of this add-on before it's released to the general…addons.mozilla.org

Greasemonkey 开发通道使您可以在将该发行版发布给一般用户之前测试其实验性新版本 。addons.mozilla.org

For Chrome: Tamper Monkey

对于Chrome： 篡改猴子

TampermonkeyThe most popular userscript manager for Blink-based browserschrome.google.com

Tampermonkey 基于Blink的浏览器 chrome.google.com上最受欢迎的用户脚本管理器

For this tutorial I will be using Chrome with Tamper Monkey.

在本教程中，我将结合使用Chrome和Tamper Monkey。

There shouldn’t be any significant differences with the process after installing either Grease Monkey or Tamper Monkey.

安装了Grease Monkey或Tamper Monkey后，该过程应该没有太大的区别。

Just in case, here is a quick link to installing Grease Monkey (as well as making a few things with it.)

以防万一，这里是安装Grease Monkey的快速链接(以及使用它做的一些事情)。

Greasemonkey Tutorial for BeginnersIn Greasemonkey tutorial, I have covered how to write Greasemonkey user scripts. After this tutorial,you will be able…hayageek.com

初学者的 Greasemonkey教程在Greasemonkey教程中，我介绍了如何编写Greasemonkey用户脚本。 学习完本教程后，您将可以... hayageek.com

该项目 (the project)

We are going to be making a slight change to the home page on Hacker News http://news.ycombinator.com.

我们将对Hacker News http://news.ycombinator.com的主页进行一些更改。

We will be using jQuery to make alternating links background colors slightly different to improve readability.

我们将使用jQuery使交替链接的背景颜色略有不同，以提高可读性。

开始一个新脚本 (start a new script)

Click on the Tamper Monkey icon in the top right and select ‘Add a new script’ from the dialog box.

单击右上角的Tamper Monkey图标，然后从对话框中选择“ 添加新脚本” 。

You should be brought to a new tab that looks like this

您应该被带到一个看起来像这样的新标签页

填写信息 (Fill in the information)

After starting a new script the first thing we want to do is fill in the script information at the top. Go ahead and fill in the following attributes how ever you want

启动新脚本后，我们要做的第一件事是在顶部填写脚本信息。继续并根据需要填写以下属性

name
名称
description
描述
author
作者

I will show you what mine looks like as well.

我也会告诉你我的模样。

添加jQuery (Add jQuery)

right before the line

就在行前

// ==/UserScript==

add a line with the text of

用以下文字添加一行

// @require http://code.jquery.com/jquery-latest.js

Think of this as importing/requiring jQuery for a JS project.

将其视为为JS项目导入/需要jQuery。

这是我的 (here is mine)

您好script.js！ (Hello script.js!)

Let’s see if it our script loads on http://news.ycombinator.com and jQuery is good to go.

让我们看看它是否可以将脚本加载到http://news.ycombinator.com上，并且可以使用jQuery。

After the // your code here line add the following code

在// 您的此处代码行之后，添加以下代码

$(document).ready(function() {  alert('WINNING');});

and enter Ctrl + s or click on the save button on the left

然后输入Ctrl + s或单击左侧的保存按钮

You may be brought to the following page. If not, click on the Installed userscripts tab.

您可能会被带到下一页。如果没有，请单击“已安装的用户脚本”选项卡。

Awesome! Out script is loaded into Tamper Monkey. The green dot on the left means that the script is turned on. You can even see the Hacker News logo in the screenshot.

太棒了！输出脚本已加载到“篡改猴子”中。左侧的绿点表示脚本已打开。您甚至可以在屏幕截图中看到Hacker News徽标。

执行脚本 (execute the script)

Visit Hacker News in your browser and if you’ve been following along and everything went well, you should see

在浏览器中访问Hacker News ，如果您一直遵循并一切顺利，则应该看到

启动调试器 (Fire up the debugger)

It’s time to find the post elements we want to modify. Enter Ctrl + Shift + i to bring up the browser debugger.

现在该找到我们要修改的post元素了。输入Ctrl + Shift + i打开浏览器调试器。

Now we want to select an element to take a closer look. Clicking on the blue square with the mouse in it at the top left of the debugger will open the element selector. You can also use the key command Ctrl + Shift + c.

现在，我们要选择一个元素来仔细查看。在调试器左上角单击带有鼠标的蓝色方块，将打开元素选择器。您也可以使用键盘命令Ctrl + Shift + c 。

As you can see I found an element called td.title. After clicking on it the element is highlighted in the elements tab of the debugger (also shown above.)

如您所见，我发现了一个名为td.title的元素。单击该元素后，该元素将在调试器的元素选项卡中突出显示(也显示在上方)。

Highlighting the element above our title called

突出显示标题上方的元素称为

<tr class="athing">

selects this in the browser

在浏览器中选择它

Bingo. It looks like we found the element we want. Hacker News has a clean HTML layout so it wasn’t too difficult to find our target element.

答对了。看起来我们找到了想要的元素。 Hacker NewsHTML布局整洁，因此找到我们的目标元素并不难。

If you remember your jQuery, all you have to do to find all of the post elements is use the selector

如果您还记得自己的jQuery，查找所有post元素所需要做的就是使用选择器

$('.athing')

对我们的post元素做点事 (do something to our post element)

Now that we have a way to select our element with jQuery we can alter our element. Let’s change the background color of the posts using the following code. Change the $(document).ready() code to this

现在，我们有了使用jQuery选择元素的方法，我们可以更改元素。让我们使用以下代码更改帖子的背景色。将$(document).ready()代码更改为此

$(document).ready(function() {  $('.athing').css('background-color', '#DDD');});

note: #DDD is shorthand for #DDDDDD;

注意：#DDD是#DDDDDD的简写；

let’s look at the resulting page. Remember to save your userscript then refresh the HackerNews page. You may have to close your debugger to view the whole page.

让我们看看结果页面。记住要保存用户脚本，然后刷新HackerNews页面。您可能必须关闭调试器才能查看整个页面。

Are we done yet? Not quite. We have changed all of our post elements instead of alternating. It may look like the zebra effect we wanted but that’s only because the score/subinfo element isn’t effected. If you feel inclined to alter that element as well please do and feel free to post your method in the comments. It’s outside of the scope of this guide.

我们完成了吗？不完全的。我们已经更改了所有帖子元素，而不是交替更改。它可能看起来像我们想要的斑马效果，但这只是因为score / subinfo元素没有受到影响。 如果您也想更改该元素，请随时在注释中发表您的方法。 它超出了本指南的范围。

Oh no?! What do we do… I don’t want to write any loops!

不好了？！ 我们该怎么办……我不想编写任何循环！

jQuery来解救 (jQuery to the rescue)

Have no fear, fellow Campers. jQuery has come to the rescue yet again.

别担心，露营者们。 jQuery再次来了。

jQuery provides special selectors just for an occasion like this.

jQuery为此类场合提供了特殊的选择器。

Now introducing :odd

现在介绍：odd

:odd SelectorDescription: Selects odd elements, zero-indexed. See also even. In particular, note that the 0-based indexing means…api.jquery.com

：odd选择器 说明：选择零索引的奇数元素。 另请参见。 特别要注意的是，基于0的索引意味着… api.jquery.com

all we have to do is add :odd to the end of our selector so that the line looks like this. note: I have also changed the color to #EEE; to blend in better.

我们要做的就是在选择器的末尾添加：odd ，以便该行看起来像这样。 注意：我也将颜色更改为#EEE； 更好地融合。

$(‘.athing:odd’).css(‘background-color’, ‘#EEE’);

Save your script and refresh HackerNews and you should see this final product

保存脚本并刷新HackerNews，您应该会看到最终产品

总结 (Wraping up)

There you have it. Now you have another creative outlet to unleash your budding coding wizardry on! User Scripts can be used to tweak the functionality or look of a site, to add a feature you’ve always wanted, plus much more.

你有它。现在，您有了另一个富有创意的渠道，可以发掘萌芽的编码向导！用户脚本可用于调整网站的功能或外观，添加您一直想要的功能，以及更多其他功能。

家庭作业 (Homework)

Write your own User Script to add something to a website you use often. Whether it be styling or a button that can toggle the visibility of certain elements, it’s all up to you. Provide your product in the comments here!

编写自己的用户脚本，以向您经常使用的网站添加内容。无论是样式设置还是可以切换某些元素可见性的按钮，一切都取决于您。在此处的评论中提供您的产品！

Go forth and conquer Campers!

来征服露营者！