web-dev-qa-db-ja.com

Chrome Extensionを使用してURLの変更をリッスンする方法

Google Chrome拡張機能を作成して、いくつかの一般的なタスクを自動化します。必要な機能は次のとおりです。

  1. 新しいタブを作成してウェブメールに移動します
  2. ユーザー名とパスワードを入力してください
  3. 「送信」ボタンをクリックします
  4. Webメールページが表示されるまで待ち、「ラウンドキューブ」クライアントを選択します。

手順1、2、および3を完了しましたが、動作します。 roundcubeクライアントを選択する機能を実行できるように、資格情報が送信された後にURLの変更をリッスンしようとすると多くの問題が発生します

マニフェストに追加してクライアント選択ページが表示されたときにスクリプトを実行できることは知っていますが、代わりに「chrome.tabs.executeScript」を使用して、chrome拡張機能であり、クライアント選択ページに手動で移動した場合ではありません。

ここに私の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://*/*"
  ]
}

ここに私の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();
    });

});

そして、これはタブ作成のコールバックとして実行されるコンテンツスクリプトです（電子メールログインページが取得され、DOMが読み込まれたとき）。また、電子メール資格情報が送信され、クライアント選択ページのDOMが読み込まれたとき（今働いています）

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');
    }
}()

助けていただければ幸いです...ありがとう！

javascriptjquerygoogle-chromegoogle-chrome-extension
20
HelloWorld

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

NycCompSciで述べたように、コンテンツスクリプトからchrome apiを呼び出すことはできません。メッセージを渡すことでコンテンツスクリプトにapiデータを渡すことができたので、ここで共有すると思います。最初の呼び出しonUpdated background.jsで：

マニフェスト

{
  "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

    }
  }
);

次に、このスクリプトを展開して、次のようにデータ（新しいURL およびその他のchrome.tabs.onUpdated info を含む）をbackground.jsからコンテンツスクリプトに送信できます。

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
      })
    }
  }
);

コンテンツスクリプトでそのデータをリッスンするだけです。

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!
    }
});

それが誰かを助けることを願っています！ ʘ‿ʘ

24
ztrat4dkyle