页面重定向后如何调用Chrome扩展功能？

Question

I am working on building a Javascript (in-browser) Instagram bot. However, I ran into a problem.

If you run this script, the first function will be called and the page will be redirected to " https://www.instagram.com/explore/tags/samplehashtag/ " and the second function will be called immediately after (on the previous URL before the page changes to the new URL). Is there a way to make the second function be called after this second URL has been loaded completely?

I have tried setting it to a Window setInterval() Method for an extended time period, window.onload and a couple of other methods. However, I can't seem to get anything to work. Any chance someone has a solution?

This is my first chrome extension and my first real project, so I may be missing something simple..

manifest.json

    {
  "name": "Inject Me",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Injecting stuff",
  "homepage_url": "http://danharper.me",
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": true
  },
  "browser_action": {
    "default_title": "Inject!"
  },
  "permissions": [
    "https://*/*",
    "http://*/*",
    "tabs"
  ]
}

inject.js

  (function() {

  let findUrl = () => {
    let hashtag = "explore/tags/samplehashtag/";
    location.replace("https://www.instagram.com/" + hashtag);
  }

  findUrl();
})();

background.js

    // this is the background code...

// listen for our browerAction to be clicked
chrome.browserAction.onClicked.addListener(function(tab) {
  // for the current tab, inject the "inject.js" file & execute it
  chrome.tabs.executeScript(tab.ib, {
    file: 'inject.js'
  });

});

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {

  chrome.tabs.executeScript(tab.ib, {
    file: 'inject2.js'
  });


});

inject2.js

(function() {

if (window.location.href.indexOf("https://www.instagram.com/explore/tags/samplehashtag/") != -1){
  let likeAndRepeat = () => {
    let counter = 0;
    let grabPhoto = document.querySelector('._9AhH0');

    grabPhoto.click();

    let likeAndSkip = function() {
      let heart = document.querySelector('.glyphsSpriteHeart__outline__24__grey_9.u-__7');
      let arrow = document.querySelector('a.coreSpriteRightPaginationArrow');

      if (heart) {
        heart.click();
        counter++;
        console.log(`You have liked ${counter} photographs`)
      }
      arrow.click();
    }

    setInterval(likeAndSkip, 3000);
    //alert('likeAndRepeat Inserted');
  };

  likeAndRepeat();

}
})();

Answer 1

It is not clear from the question and the example, when you want to run your function. But in chrome extension there is something called Message Passing

https://developer.chrome.com/extensions/messaging

With message passing you can pass messages from one file to another, and similarly listen for messages. So as it looks from your use case, you can listen for a particular message and then fire your method.

For example

background.js

chrome.runtime.sendMessage({message: "FIRE_SOME_METHOD"})


popup.js

    chrome.runtime.onMessage.addListener(
    function(request) {

    if (request.message == "FIRE_SOME_METHOD")
      someMethod();
  });

EDIT Also if you want to listen for the URL changes, you can simply put a listener provided as in the documentation .

  chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
      console.log('updated tab');
  });