The code of chrome. tabs. executeScript to get the value of the JSON object is undefined. Why?

Question

I want to get some values of the JSON object in the code of chrome. tabs. executeScript and send them out, but the value of JSON in the code is always undefined. Why?

Here's my bacground. JS code：

chrome.extension.onRequest.addListener(({ tabId, args }) => {
  chrome.tabs.executeScript(tabId, {
    code: `
        var value = ${JSON.stringify(args)};

        var obj = value.trans_result;
        console.log(obj);

        var sendData = JSON.stringify(obj);

        var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://localhost:8088/info?str="+sendData, true);
        xhr.send();
        }
    `,});
});

Here's my manifest.json.JS code：

{
  "name": "chrome-extension-example",
  "version": "1.0",
  "minimum_chrome_version": "10.0",
  "description": "test",
  "devtools_page": "index.html",
  "icons":
    {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
    "page_action":
    {
        "default_icon": "img/icon.png",
        "default_title": "hello...",
        "default_popup": "popup.html"
    },
  "background": { "scripts": ["background.js"] },
  "permissions": [
    "tabs",
    "declarativeContent",
        "https://fanyi.baidu.com/*",
    "http://localhost:8080/*"
  ],
  "manifest_version": 2
}

and my manifest.json.JS code：

const log = (...args) => chrome.extension.sendRequest({
  tabId: chrome.devtools.tabId,
  args,
});
chrome.devtools.network.onRequestFinished.addListener(async (...args) => {
  try {
    const [{

      request: { method, queryString, url },

      getContent,
    }] = args;

    //log(method, queryString, url);


    const content = await new Promise((res, rej) => getContent(res));
    log(content);
  } catch (err) {
    log(err.stack || err.toString());
  }
});

thank you very much！

Answer 1

The code that is executed by chrome.tabs.executeScript takes what you wrote there and interprets it in that tab's space. So it's using the value of args that is present in that tab's space, which is undefined. Basically the args in var value = ${JSON.stringify(args)}; is different from the args above.

You could try

chrome.extension.onRequest.addListener(({ tabId, args }) => {
  chrome.tabs.executeScript(tabId, {
    code: `
        var value = ${JSON.stringify(` + args + `)};

        var obj = value.trans_result;
        console.log(obj);

        var sendData = JSON.stringify(obj);

        var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://localhost:8088/info?str="+sendData, true);
        xhr.send();
        }
    `,});
});

Also, for what it's worth, chrome.extension.onRequest is deprecated. It's recommended that you use onMessage and sendMessage instead.