6

我目前正在构建一个谷歌扩展，这就是我想要的：

在 awesome.page1.html 上执行一些操作，然后自动按 Next Page。加载新页面后，填写表单的文本字段。

我的问题是，即使我知道如何填写文本字段，我也不知道如何告诉它在 page2 加载后填写它。它一直在尝试做第 1 页上的所有事情。

这是我正在尝试的，但它不起作用：

function addEffect() {
  document.getElementsByClassName("effect1 shine")[0].click();
  document.getElementsByClassName("nextPage BigButton")[0].click();
  nextStep();
}

function nextStep() {
  if(document.getElementsByClassName("myformTextField imageName") != undefined) { 
         alert('Page 2 is up.');
  } 

  else {
         alert('Page 1 is still up.');
         setTimeout("nextStep()", 250);
  }
}

我只是为了测试而使用警报，即使它仍在第 1 页上，我也不断收到“第 2 页已启动”。我正在检查仅存在于第 2 页中的元素是否已启动。我如何确保 page2 已启动？

4

4 回答 4

5

您将遇到的主要问题是 JavaScript 变量（包括函数）不会从一个页面持续到另一个页面。换句话说，您不能在一个页面上编写一个函数并让它在替换它的页面上执行。

您可以传递一个 URL 变量或设置一个 cookie 以实现数据持久性——或将设置存储在您的服务器上——但直接的 JavaScript 方法是行不通的。

当然，有些人使用一个小技巧将下一页的整个 DOM 加载到变量中（使用 XMLHttpRequest 的变体），将存储的设置应用于内存中的对象，然后替换大部分文档大多数新 DOM 的主体，但这可能比您需要的要复杂得多，并且它必须符合同域要求。

于 2013-06-17T20:58:58.393 回答
2

好吧，你的代码在这里：

document.getElementsByClassName("myformTextField imageName")

当它什么都没有找到时返回一个空数组，这不是undefined. 因此，您的第一个 if 条件将始终为真，无论它是否找到您的项目。

相反，检查返回的长度getElementsByClassName或使用querySelector并检查 null

if (document.getElementsByClassName("myformTextField imageName").length) { ... }

// Or..
if (document.querySelector('.myformTextField.imageName') !== null) { ... }
于 2013-06-17T20:52:08.503 回答
2

我选择使用的最简单的方法是内容脚本匹配。

我所做的是在我的扩展程序中创建两个单独的 javascript 文件：1.js 和 2.js。当 awesome.page1.html 加载时，它将运行 1.js，当 page2.html 加载时，它将运行 2.js。

我在 manifest.json 文件中所做的一切如下：

"content_scripts":[
        {"matches": ["http://awesome.page1.com/*"], "js": ["1.js"]},
        {"matches": ["http://page2.com/*"], "js": ["2.js"]}]
于 2013-06-22T23:40:38.773 回答
0

您应该尝试使用jquery和$(document).ready(handler)

这确实是确保页面在尝试执行您的命令之前加载的最佳实践 http://api.jquery.com/ready/

于 2013-06-17T20:54:27.423 回答