web-dev-qa-db-fra.com

Comment écouter le changement d'URL avec Chrome Extension

J'écris une extension Google Chrome pour automatiser certaines tâches courantes. La fonctionnalité que je souhaite est la suivante:

  1. Créez un nouvel onglet et accédez à mon webmail
  2. entrez le nom d'utilisateur et le mot de passe
  3. cliquez sur le bouton "soumettre"
  4. Attendez que la page webmail apparaisse et choisissez le client "roundcube".

J'ai effectué les étapes 1, 2 et 3 et elles fonctionnent. J'ai beaucoup de mal à essayer d'écouter le changement d'URL après la soumission de mes informations d'identification afin que la fonction qui sélectionne le client roundcube puisse s'exécuter

Je sais que je peux exécuter un script lorsque la page de sélection du client apparaît en ajoutant à mon manifeste, mais je souhaite utiliser "chrome.tabs.executeScript" à la place afin que le cube ne soit choisi que si j'exécute le script à partir du chrome extension et non si je vais manuellement sur la page de sélection du client.

Voici mon manifest.json:

{
  "manifest_version": 2,

  "name"       : "Chrome Autobot",
  "description": "This extension will run various automation scripts for google chrome",
  "version"    : "1.0",

  "browser_action" : {
    "default_icon" : "icon.png",
    "default_popup": "index.html"
  },
  "permissions": [
    "activeTab",
    "webNavigation",
    "tabs",
    "http://*/*",
    "https://*/*"
  ]
}

Voici mon script chrome:

jQuery(function($) {
    "Use Strict";

    var openWebmail = function() {
        chrome.tabs.create({
            url: 'http://mywebmaillogin.com:2095/'
        }, function() {
            chrome.tabs.executeScript(null, {file: "scripts/openEmail.js"});
        });
        chrome.tabs.onUpdated.addListener(function(){
            chrome.tabs.executeScript(null, {file: "scripts/openEmail.js"});
            alert('i work');
        });
    };

    var init = $('.script-init');
    init.on('click', function() {
        openWebmail();
    });

});

et voici le script de contenu à exécuter en tant que rappel de la création d'onglets (lorsque la page de connexion par e-mail est récupérée et que le DOM est chargé), et également lorsque les informations d'identification de l'e-mail sont soumises et que le DOM de la page de sélection du client est chargé (ce qui n'est pas travailler en ce moment)

var openEmail = function() {
    var loc = window.location.href;
    if(loc === 'http://mywebmaillogin.com:2095/') {
        var submit = document.getElementById('login_submit');
        user.value = 'myusername';
        pass.value = 'mypassword';
        if(user.value === 'myusername' && pass.value === 'mypassword') {
            submit.click();
        }
        else {
            openEmail();
        }
    }
    if(loc.indexOf('http://mywebmaillogin:2095/') > -1 && loc.indexOf('login=1') > -1) {
        alert('I work');
    }
}()

toute aide serait appréciée Merci!

javascriptjquerygoogle-chromegoogle-chrome-extension
20
HelloWorld

utilisez chrome.tabs.onUpdated

Maifest.json 

{
  "name": "My test extension",
  "version": "1",
  "manifest_version": 2,
  "background": {
    "scripts":["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["contentscript.js"]
    }
  ],
  "permissions": [
    "tabs"
  ]
}

contentscript.js 

 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    alert('updated from contentscript');
 });

background.js 

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    alert('updated from background');
});
16
Shubham

Comme mentionné par NycCompSci, vous ne pouvez pas appeler l'api chrome à partir de scripts de contenu. J'ai pu transmettre des données api à des scripts de contenu avec le passage de message, alors j'ai pensé partager cela ici. Premier appel onUpdated dans background.js:

Manifeste

{
  "name": "My test extension",
  "version": "1",
  "manifest_version": 2,
  "background": {
    "scripts":["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["contentscript.js"]
    }
  ],
  "permissions": [
    "tabs"
  ]
}

background.js

chrome.tabs.onUpdated.addListener(function
  (tabId, changeInfo, tab) {
    // read changeInfo data and do something with it (like read the url)
    if (changeInfo.url) {
      // do something here

    }
  }
);

Ensuite, vous pouvez développer ce script pour envoyer des données (y compris la nouvelle URL et d'autres informations chrome.tabs.onUpdated ) de background.js à votre script de contenu comme ceci:

background.js

chrome.tabs.onUpdated.addListener(
  function(tabId, changeInfo, tab) {
    // read changeInfo data and do something with it
    // like send the new url to contentscripts.js
    if (changeInfo.url) {
      chrome.tabs.sendMessage( tabId, {
        message: 'hello!',
        url: changeInfo.url
      })
    }
  }
);

Il vous suffit maintenant d'écouter ces données dans votre script de contenu:

contentscript.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    // listen for messages sent from background.js
    if (request.message === 'hello!') {
      console.log(request.url) // new url is now in content scripts!
    }
});

J'espère que cela aide quelqu'un! ʘ‿ʘ

24
ztrat4dkyle