区分webRequest.onBeforeRequest原始页面与注入

时间:2017-08-01 20:34:26

标签: javascript firefox-webextensions

我在后台脚本中使用webRequest.onBeforeRequest。然后,在内容(?)脚本中,注入到原始页面,我向该页面发出请求的同一URL发出AJAX请求,所以很自然地它开始很快就会挂起浏览器的循环!

作为一个临时措施,我在我的AJAX调用(& me = 1)中在URL的末尾添加了另一个参数,并使urls过滤器结束,就像原始URL结束一样,但是没有似乎是最好的方式,因为原始URL可能在将来发生变化。

做什么会更好?例如,我查看了我的监听器返回的requestDetails。但是,由于脚本是在原始页面中注入的,所以我找不到任何区别。或者,也许我可以制作urls过滤器,该过滤器只接受以“& me = 1”结尾的网址...?

(我不能(不会)使用标志变量,因为页面动态地再次变化,它似乎不是最好的方式,即使我能以某种方式使它工作(我还没有)。 )

当然,或者,我可以只使用原始请求提供的数据,但我不能find会这样做的事件/对象,但也许我错过了它,因为我'我几乎是制作网络扩展的初学者。

编辑:

的manifest.json

{
  "manifest_version": 2,
  "name": "testtube",
  "version": "1.0",
  "permissions": [
    "webRequest",
    "https://*/*",
    "activeTab"
  ],
  "web_accessible_resources": [
    "https://www.youtube.com/player_api",
    "index.html",
    "js/jquery-3.2.1.min.js",
    "js/player.js",
    "js/jquery-ui.min.js",
    "css/jquery-ui.css", "css/style.css"
  ],
  "content_scripts": [
    {
      "matches": [ "https://www.youtube.com/watch*"],
      "css": [ "css/jquery.dataTables.min.css", "css/jquery-ui.css", "css/style.css" ],
      "js": [ "js/jquery-3.2.1.min.js","js/jquery-ui.min.js",  "js/main.js" ]
    }
  ]
  ,"background": {
    "scripts": ["js/background.js" ]
  }

}

background.js

"use strict";

var lastRequestId = 0;

function logURL(requestDetails) {

    console.log("requestDetails: ", requestDetails);
//this is actually a solution as per my answer below
    if ((lastRequestId != requestDetails.requestId) && (requestDetails.url.indexOf("&me=1") == -1))
    {
        browser.tabs.sendMessage(requestDetails.tabId, { ccurl: requestDetails.url }).then(response => {
            console.log("Message from the content script:");
            console.log(response.response);
        }).catch(onError);;

    }
}

browser.webRequest.onBeforeRequest.removeListener(logURL);
browser.webRequest.onBeforeRequest.addListener(
  logURL,
  { urls: ["*://www.youtube.com/api/somepattern*"] }
);

function onError(error) {
    console.error(`Error: ${error}`);
}

main.js

"use strict";
var jq;

jq = document.createElement('script');
jq.onload = function () { };
jq.src = chrome.extension.getURL("/js/jquery-3.2.1.min.js");
document.querySelector('head').appendChild(jq);

jq = document.createElement('script');
jq.onload = function () { };
jq.src = chrome.extension.getURL("/js/jquery-ui.min.js");
document.querySelector('head').appendChild(jq);

/*... some other scripts... */

var s = document.createElement('script');
s.src = chrome.extension.getURL('/js/player.js');
s.onload = function () {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);

var _url = "";


function UURL(request, sender, sendResponse) {

    _url = request.url;

    var loadR = " loadRequest('" + _url.toString() + "'); ";

    var script = document.createElement('script');
    script.textContent = loadR;

    document.querySelector('head').appendChild(script);

    return Promise.resolve({ response: "Hi from content script" });
}


$(function () {

    console.log("jquery loaded");

    browser.runtime.onMessage.removeListener(UURL)
    browser.runtime.onMessage.addListener(UURL);

    /* irrelevant code here... */

});

player.js

var loadRequest = function loadRequest(_url) {
_url = _url + "&me=1";

$.ajax({
    type: "get",
    url: _url,
    dataType: "xml",
    success: function (data) {
        /* irrelevant code here */

2 个答案:

答案 0 :(得分:1)

好的,改进版的"临时措施"是在监听器中我针对请求的URL添加了另一个条件

(requestDetails.url.indexOf("&me=1") == -1)

然后然后进行我的ajax调用...并在请求的urls过滤器中,我最后留下asterix(*)。通过这种方式,如果原始网址最终发生变化并不重要,但技术上额外的请求会被捕获..如果没有其他人回复,那就足够了。

答案 1 :(得分:1)

如果您尝试区分主页面加载和XMLHttpRequest 1

您可以通过多种方式区分不同类型的请求。如果没有您的实际代码来尝试,我们必须猜测您实际在做什么。

正常网页加载的webRequest.onBeforeRequest如下所示:

webRequest.onBeforeRequest ->  arg[0]= {"frameId":0,"method":"GET","parentFrameId":-1,"requestId":"260870","tabId":411,"timeStamp":1500401223979.044,"type":"main_frame","url":"http://www.example.com/"}
-----------------------------------------------------------------------------------------------------------------------------------------------------^^^^^^^^^^^^^^^^^^^

如您所见,details对象包含type属性,即webRequest.ResourceType。对于主框架的HTML加载,它将包含"main_frame"details对象也将具有"frameId":0,"parentFrameId":-1)。

对于您的AJAX请求,type属性的值应为xmlhttprequest。但是,通过" ajax请求"你的意思不是XMLHttpRequest。在这种情况下,type属性可能具有其他值,但不应为"main_frame"

1。我以不同于okkko的意图阅读问题的原始版本。正如目前所写的那样,这并不包括他们感兴趣的案例。但是,对于阅读这个问题/答案的其他人来说,它可能有一些价值,所以我要把它留下来。