Mengapa kode ini tidak berfungsi? Saya membuat ekstensi Firefox tetapi kodenya tidak berjalan. Tetapi jika saya menempelkan kode tersebut ke konsol, itu berfungsi

Saya membuat ekstensi firefox yang mendapatkan semua url permintaan dan menampilkannya. Tetapi kode tersebut hanya berfungsi jika saya menempelkannya di konsol.

ketika ekstensi dimuat, tidak muncul kesalahan apa pun, sepertinya ekstensi tidak dapat berjalan

ini kode lengkapnya

xhrScript.js

(function(){

    const proxiedOpen = XMLHttpRequest.prototype.open;
    window.XMLHttpRequest.prototype.open = function ( _, url) {
        this.__URL = url;
        return proxiedOpen.apply(this, arguments);
    };

    const proxiedSend = window.XMLHttpRequest.prototype.send;
    window.XMLHttpRequest.prototype.send = function () {
        const { protocol, host } = window.location;
        // showing only when it paste in console
        console.log("full request url ", `${protocol}//${host}${this.__URL}`);
        return proxiedSend.apply(this, [].slice.call(arguments));
    };

})();

// this works all times
document.body.style.border = "7px solid blue";

manifest.json

{
    "manifest_version": 2,
    "name": "XHR request urls",
    "version": "1.0",
    "description": "get all the request url's",

    "content_scripts": [
      {
        "matches": ["*://*/*"],
        "js": ["xhrScript.js"]
      }
    ]  
}

Seperti yang Anda lihat, di baris terakhir adalah document.body.style.border = "7px solid blue";, ini berfungsi dengan baik setiap saat. Namun metode XMLHttpRequest open dan send tidak berfungsi. hanya berfungsi jika saya menempelkan kode di konsol.

jika ingin melihat contohnya, coba copy pastekan kode xhrScript.js di https://reactjs.org (ini SPA, jadi mudah untuk memeriksa apa yang saya inginkan) di konsol devTools, dan melihat semua permintaan.

Saya tidak tahu mengapa kode ini hanya berjalan ketika ditempelkan di konsol


javascript xmlhttprequest firefox-addon-webextensions firefox firefox-addon
person Carlos Martínez    schedule 13.11.2020    source sumber

Jawaban (1)


arrow_upward
3
arrow_downward

Skrip konten berjalan di lingkungan JavaScript terisolasi yang berarti window dan kontennya diisolasi dari halaman sehingga ketika Anda memodifikasinya, Anda hanya mengubah versi skrip konten.

Ada dua solusi:

  1. Khusus Firefox.

    Gunakan wrappedJSObject dan exportFunction untuk mengakses konteks halaman (info lebih lanjut):

    const urls = new WeakMap();
const origXhr = hookPagePrototype('XMLHttpRequest', {
  open(method, url) {
    urls.set(this, url);
    return origXhr.open.apply(this, arguments);
  },
  send() {
    console.log('Sending', new URL(urls.get(this), location).href);
    return origXhr.send.apply(this, arguments);
  },
});

function hookPagePrototype(protoName, funcs) {
  const proto = wrappedJSObject[protoName].prototype;
  const oldFuncs = {};
  for (const [name, fn] of Object.entries(funcs)) {
    oldFuncs[name] = exportFunction(proto[name], wrappedJSObject);
    proto[name] = exportFunction(fn, wrappedJSObject);
  }
  return oldFuncs;
}

  2. Kompatibel dengan Chrome.

    Gunakan skrip DOM untuk menjalankan kode dalam konteks halaman: instruksi.

    Ini tidak akan berfungsi pada halaman yang dilindungi oleh Kebijakan Keamanan Konten (CSP) yang ketat yang mencegah eksekusi skrip jadi ketika menulis ekstensi untuk Firefox kita harus menggunakan metode wrappedJSObject sebagai gantinya.

person wOxxOm    schedule 13.11.2020
comment
Wah berhasil, saya masih baru sekali dalam membuat ekstensi browser. Ini banyak membantu saya, terima kasih telah berbagi dokumen - person Carlos Martínez; 13.11.2020