适用于 2 页的书签

Question

我正在使用小书签将 javascript 插入网页。我正在尝试登录到我的 gmail 帐户（该部分有效）并在我的 gmail 帐户中自动单击 Sent 文件夹作为页面加载。这是起始页：

这是我在书签中使用的代码：

javascript:
document.getElementById('Email').value='myEmail@gmail.com';
document.getElementById('next').click();
setTimeout(function(){
document.getElementById('Passwd').value='myPassword';
document.getElementById('signIn').click();},1000);

setTimeout(function(){
document.getElementsByClassName("J-Ke n0 aBU")[0].click();
},6000);

J-Ke n0 aBU 是 Sent 文件夹的 class。此代码登录到我的帐户，但它不会单击“已发送文件夹”。

我注意到其他网站上有类似的行为；每当加载或刷新新页面时，小书签就会停止工作。
为什么会这样，在不同页面上使用同一个小书签的正确方法是什么，而不是最初点击的。

Answer 1

由于 JavaScript 仅在当前页面的上下文中执行，因此无法执行跨越多个页面的 JavaScript。因此，无论何时加载第二页，都会停止执行第一页的 JavaScript。

如果可以在两个页面上执行 JavaScript，攻击者可以将您带到另一个页面，在那里读取您的个人信息，然后将其发送到他控制的另一个服务器 AJAX （例如您的邮件）。

您的问题的解决方案是使用 Selenium IDE for Firefox (direct link to the extension)。最初是为自动化测试而设计的，它也可以用来自动化你的浏览器。

Answer 2

免责声明：我没有 gmail，所以我没有针对 gmail 专门测试这个。
此答案存在于地址 :

What about iframes. Is theoretically possible to use gmail login in an iframe and therefore when the iframe changes to another page this doesnt have effect on the bookmarklet?

是的，在技术上可以使用 iframe（或者，上帝保佑，框架集）有一个永久书签。
只要您的父级 window（并且它包含 iframe）保持在 相同的域，它应该根据跨域规范工作。
然而，有可能（取决于使用的方法）（非）故意 'counter-act' 这个（这取决于使用的反作用，仍然可以被规避，等等）。

导航到网站，然后执行书签：

创建 iframe。
将 onload-handler 设置为 iframe。
用 iframe 替换当前网页内容（到 window 的全宽和全高）。
将 iframe 的源设置为当前 url（在注入的 iframe 中重新加载当前打开的页面）。

然后 iframe 的 onload-handler 的工作是检测（使用 url/title/page-content）加载了哪个页面以及应该采取哪些（如果有的话）操作。

示例（使用 Dean Edward's Packer v3 缩小（删除注释和不需要的空格））：

javascript:(function(P){
  var D=document
  ,   B=D.createElement('body')
  ,   F=D.createElement('iframe')
  ; //end vars
  F.onload=function(){
    var w=this.contentWindow     //frame window
    ,   d=w.document             //frame window document
    ; //end vars
    //BONUS: update address-bar and title. 
    //Use location.href instead of document.URL to include hash in FF, see 
    history.replaceState({}, D.title=d.title, w.location.href ); 
    P(w, d);        //execute handler
  };
  D.body.parentNode.replaceChild(B, D.body);   //replace body with empty body
  B.parentNode.style.cssText= B.style.cssText= (
   F.style.cssText= 'width:100%;height:100%;margin:0;padding:0;border:0;'
  ) + 'overflow:hidden;' ;           //set styles for html, body and iframe
  //B.appendChild(F).src=D.URL; //doesn't work in FF if parent url === iframe url
  //B.appendChild(F).setAttribute('src', D.URL); //doesn't work in FF if parent url === iframe url
  B.appendChild(F).contentWindow.location.replace(D.URL); //works in FF
}(function(W, D){   //payload function. W=frame window, D=frame window document
  alert('loaded');
  // perform tests on D.title, W.location.href, page content, etc.
  //   and perform tasks accordingly
}));

注意：进一步缩小的明显方法之一是将括号访问与字符串变量一起用于 createElement、contentWindow 等。

这里是用于 http://www.w3schools.com 的负载函数（来自上面的小书签）的示例函数体（抱歉，我没法快速想到另一个目标）：

var tmp;
if(D.title==='W3Schools Online Web Tutorials'){
  //scroll colorpicker into view and click it after 1 sec
  tmp=D.getElementById('main').getElementsByTagName('img')[0].parentNode;
  tmp.focus();
  tmp.scrollIntoView();
  W.setTimeout(function(){tmp.click()},1000);
  return;
}
if(D.title==='HTML Color Picker'){
  //type color in input and click update color button 'ok'
  tmp=D.getElementById('entercolorDIV');
  tmp.scrollIntoView();
  tmp.querySelector('input').value='yellow';
  tmp.querySelector('button').click();

  //click 5 colors with 3 sec interval
  tmp=D.getElementsByTagName('area');
  tmp[0].parentNode.parentNode.scrollIntoView();
  W.setTimeout(function(){tmp[120].click()},3000);
  W.setTimeout(function(){tmp[48].click()},6000);
  W.setTimeout(function(){tmp[92].click()},9000);
  W.setTimeout(function(){tmp[31].click()},12000);
  W.setTimeout(function(){tmp[126].click()},15000);
  return;
}

上面的例子（小书签内）缩小：

javascript:(function(P){var D=document,B=D.createElement('body'),F=D.createElement('iframe');F.onload=function(){var w=this.contentWindow,d=w.document;history.replaceState({},D.title=d.title,w.location.href);P(w,d)};D.body.parentNode.replaceChild(B,D.body);B.parentNode.style.cssText=B.style.cssText=(F.style.cssText='width:100%;height:100%;margin:0;padding:0;border:0;')+'overflow:hidden;';B.appendChild(F).contentWindow.location.replace(D.URL)}(function(W,D){var tmp;if(D.title==='W3Schools Online Web Tutorials'){tmp=D.getElementById('main').getElementsByTagName('img')[0].parentNode;tmp.focus();tmp.scrollIntoView();W.setTimeout(function(){tmp.click()},1000);return}if(D.title==='HTML Color Picker'){tmp=D.getElementById('entercolorDIV');tmp.scrollIntoView();tmp.querySelector('input').value='yellow';tmp.querySelector('button').click();tmp=D.getElementsByTagName('area');tmp[0].parentNode.parentNode.scrollIntoView();W.setTimeout(function(){tmp[120].click()},3000);W.setTimeout(function(){tmp[48].click()},6000);W.setTimeout(function(){tmp[92].click()},9000);W.setTimeout(function(){tmp[31].click()},12000);W.setTimeout(function(){tmp[126].click()},15000);return}}));

希望这对您有所帮助（您开始吧）！

适用于 2 页的书签

bookmarklet that works on 2 pages

html

javascript

bookmarklet