如何为网站编写用户脚本 [初学者]答案

【问题标题】：How to write Userscript for a website [Beginner]如何为网站编写用户脚本 [初学者]
【发布时间】：2015-08-03 18:14:34
【问题描述】：

为了简短起见，我想编写一个用户脚本，它可以读取网站上的数据并以更用户友好的方式显示。

我几乎没有编写用户脚本的经验，我在 firefox 上安装了 Firebug 来帮助我定位元素。

我从网站保存了一个页面，但我想了解如何从这里开始，我可以使用什么软件来实时测试我的代码。我有notepad++，我可以安装eclipse。

我能找到什么：

XPATH：/html/body/main/section[2]/div[1]/div[2]/div/div[4]/div[2]/div[1]
InnerHTML：“$ 0.30”
HTML 节点+内容：<div class="value">$ 0.30</div>
CSS 路径：html body main section.box div.box-shiny-alt div.full div.winsorloses div.oitm div.item div.value

我想将其中的 4 个值类元素加在一起，然后显示总和。我应该从哪里开始？

【问题讨论】：

你显然应该从更多地学习 JavaScript 开始。我不喜欢人们在没有经验、没有尝试的情况下来到这个网站，然后发布一个问题，希望我们为他们做点什么。 :S
同意@Jamen，这是一个免费的 JavaScript 课程，你可以在一两天内完成。 codeschool.com/paths/javascript
我有 Java 方面的经验，有些类似，但我应该学习 JQuery 吗？我也在寻求可以用来帮助我学习的工具。

标签： javascript jquery html xpath userscripts

【解决方案1】：

听起来您走在正确的轨道上，但是庞大的 DOM API 对于初学者来说可能相当令人生畏，所以让我看看是否可以帮助您。正如其他人所建议的那样，熟悉 JavaScript 语言本身应该是您的第一步。

我相信您问题中最重要的一行就在这里：

我可以使用什么软件来实时测试我的代码

现在 Firefox 的内置 Web 控制台非常强大，正是您所需要的。使用 Ctrl+Shift+K 打开它。现在只关注 JavaScript 控制台和元素检查器选项卡——它们会准确地向您展示您的代码和 HTML 发生了什么。

看看这个 JS 控制台的截图，我会指出一些有用的功能：

底部的文本栏是您可以输入代码并在上面的日志中查看结果的地方。请注意，当我输入document.body.get… 时，控制台将显示以“get”开头的document.body 对象的所有属性的列表。

在日志中，您可以看到我之前输入了document.querySelector("div")，它打印了结果对象：页面上的第一个<div> 元素。如果您在控制台中单击该行，右侧的面板将打开，显示该对象的所有属性及其值。如果您单击日志中的白色方块，它将准确指出该元素在文档树中的位置。

所以，在控制台中玩耍吧；实验;如果您想知道它们的含义，请在 https://devdocs.io 或谷歌中搜索属性名称。这应该可以帮助您了解有关 DOM API 的方法。如果您对 JavaScript 有一些更具体的问题但无法找到答案，我建议您在 JavaScript 论坛或 IRC 频道上提问以帮助新手——也许是 https://www.reddit.com/r/learnjavascript 或 https://chat.stackoverflow.com/rooms/17/javascriptball-pit。或者在这里发表评论，我会看到的。祝你好运！

【讨论】：

感谢您提供所有这些信息，非常感谢您的帮助。感谢您将我指向 devdocs.io，我认为这对我非常有用。我确实注意到的一件事是，当我单击控制台中的行时，我的 Firefox 没有显示属性面板。有解决办法吗？我有一个大问题。我想创建一个从另一个网站导入数据、处理数据并将其显示在表格中的网站。但是源网站没有 API，所以我的想法是使用脚本通过 DOM 提取数据。我想在没有安装脚本的情况下从我的网站上完成这一切。可能吗？
@AH15 尝试专门点击this part。 ······由于same-origin policy，如果您想在没有用户脚本的情况下从另一个域中抓取页面，则必须从您的网络服务器本身进行。虽然这是我以前做过的事情，但我不能说我有足够的经验来建议最好的方法是什么。不过，有很多现有的库可以用于此目的；见here。