0

I want to merge the snippets below to be able to send post request (containing URL) from chrome extension to flask whenever the page in Chrome is loading without clicking the extension' icon. Is this possible? Moreover I would like the popup to be shown only on specific pages that I declare (I believe there is a way ('matches') for this in manifest.json however, I don't know how to implement this.)

chrome.tabs.query({
active: true,
lastFocusedWindow: true
}, function(tabs) {
var tab=tabs[0];
    console.log(tab.url);
var xhr = new XMLHttpRequest();
    xhr.addEventListener("readystatechange", function () {
    if (xhr.readyState == 4) {
        console.log(xhr.responseText);
        alert(xhr.responseText)
  }
});
    xhr.open("POST", "http://localhost:5000/",true);
    xhr.send(tab.url); 
});

This script allows me to send post request on click, however I need to do this without clicking. I found also such a script that displays all information about change in browser content in down-right corner:

 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
 alert(changeInfo.url);
 console.log(changeInfo.url);

I tried to merge these two, but with no result. I'm kind of newbie to JS and Chrome Extensions, so I would be duty grateful for your help.

After reaching this point I would like to be able to show popup conditionally, this is only when the specific page will be loaded, so I would appreciate your further hints.

silva1818
  • 3
  • 5

1 Answers1

0

You can use chrome.webNavigation.onCommitted and specify a list of URLs to monitor.
The code below uses console.log so the output is shown in the background console.

manifest.json:

{
  "name": "test",
  "version": "0.0.1",
  "manifest_version": 2,
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": false
  },
  "permissions": [
    "webNavigation",
    "http://localhost/"
  ]
}

background.js:

chrome.webNavigation.onCommitted.addListener(onCommitted, {
  url: [
    {hostEquals: 'www.example.org'},
    {urlPrefix: 'https://example.org/'},
    {urlMatches: '^https://(www\\.)?example.org/.*$'},
  ],
});

function onCommitted(info) {
  const xhr = new XMLHttpRequest();
  xhr.onload = () => {
    console.log('%d:%d', info.tabId, info.frameId, info.url, xhr.responseText);
  };
  xhr.open('POST', 'http://localhost:5000/');
  xhr.send(info.url);
}
wOxxOm
  • 65,848
  • 11
  • 132
  • 136
  • I have one more question concerning code above - how can I force chrome extension to show popup with response text, since alert(xhr.responseText) shows blank popup. For example if I put there: alert(info.url) I can see popup with the url, but this url is static, and in case of: xhr.response text I have a python script in flask that do some actions on specified url (web scraping and then some categorization) and then sends back an answer as string that I can see in Python but I'm not able to see it on chrome extension popup. I've tried several modifications but none of them worked as expected. – silva1818 Jan 02 '19 at 08:18
  • `onload` fires on success. Add an `onerror` listener too. Otherwise it doesn't sound like something obvious so it'd be better to ask a new question, probably with a working repro that people can run easily. – wOxxOm Jan 02 '19 at 08:32
  • wOxxOm thanks for suggestion I described more thoroughly what I want to achieve in this post: https://stackoverflow.com/questions/54005443/displaying-post-response-xmlhttprequest-in-chrome-extension-pop-up-apart-from – silva1818 Jan 02 '19 at 11:25