javascript - Chrome extension, how to delay script until page is fully loaded - Stack Overflow

admin管理员组

文章数量:1333381

I am trying to get a DOM element by class name just after opening new website address in the tab. The problem is that I have no idea how to make it wait until the page is fully loaded. I tried alarms, setTimeOut, setTimeDelay and nothing works.

chrome.runtime.onMessage.addListener(message);

function message(msg) {
  chrome.tabs.update({url: '/'});
  chrome.tabs.executeScript({code:"var theBtn = document.getElementsByClassName('btn1');theBtn[0].click();"});
}

I am using chrome.runtime.sendMessage in the popup because I want to send web addresses from input, then I press a button and the code above is triggered. I simplified this because everything else works. The (msg) is just a website address

I am trying to get a DOM element by class name just after opening new website address in the tab. The problem is that I have no idea how to make it wait until the page is fully loaded. I tried alarms, setTimeOut, setTimeDelay and nothing works.

chrome.runtime.onMessage.addListener(message);

function message(msg) {
  chrome.tabs.update({url: 'https://www.website./'});
  chrome.tabs.executeScript({code:"var theBtn = document.getElementsByClassName('btn1');theBtn[0].click();"});
}

I am using chrome.runtime.sendMessage in the popup because I want to send web addresses from input, then I press a button and the code above is triggered. I simplified this because everything else works. The (msg) is just a website address

• javascript
• html
• google-chrome
• dom
• google-chrome-extension

Share Improve this question Follow asked Dec 26, 2017 at 1:03 notFake7notFake7 14011 silver badge1212 bronze badges 1

• 2 Very interesting question! It's been a while I Chrome Extensioned. (It's Firefox' Extension too these days.) Thank you! – Rudie Commented Dec 26, 2017 at 2:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Update:

That won't work, because executeScript won't have a tab to execute on, because you just killed (updated) that. You'll have to split it into Background and Content script:

1. Background runs chrome.tabs.update
2. Background sends exact target URL to Content
3. Content listens on EVERY URL, but ignores all, unless it just got this exact URL from Background
4. If so, Content runs the script, (or tells Background to run executeScript, but that seems silly), forgets the URL, and goes back to idling

Maybe the munication in 2-3 must go the other way: Content asks Background for EVERY page load if it should act on this URL.

Very interesting use case! I made a Proof of concept because it's X-mas!

Original:

Untested! Two options:

2. Add a load listener wrapper in the script:

chrome.tabs.executeScript({
  code:"window.addEventListener('load', function() { var theBtn = document.getElementsByClassName('btn1');theBtn[0].click(); });"
});

That's your code, wrapped inside window.addEventListener('load', function() { ... });. Adding the event listener is executed immediately, but the code inside only when the page is loaded.

1. Use executeScript's runAt option. I think you want document_end. See docs

Actually it looks like the default (document_idle) is more suited: "the browser chooses a time between "document_end" and immediately after window.onload" (from here)

there are three way to do this 1. using run_at="document_end" in Manifest.json (ideal developers should use this one if possible) 2. using document is ready event using java-script or jquery 3. using executeScript

本文标签： javascriptchrome extensionhow to delay script until page is fully loadedStack Overflow