Although there are a lot of similar questions here, I couldn't solve my problem with any of the accepted solutions, so I'm creating a new question.
I have a content script that adds some functionality to a Jira Issue.
However, when navigating to the Jira Issue from a Filter Results Page, the content script doesn't run until I manually reload the page.
What I've tried so far:
Adding webNavigation Listeners (with the manifest permission), but none of them seem to trigger when the Jira Issue link is clicked from the Filter Page.
// background.js
const myLog = () => console.log('webNavigation event triggered');
browser.webNavigation.onDOMContentLoaded.addListener(myLog);
browser.webNavigation.onHistoryStateUpdated.addListener(myLog);
browser.webNavigation.onReferenceFragmentUpdated.addListener(myLog);
Adding "all_frames": true to the manifest.json, but that didn't make it work either:
// manifest.json
...
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["*://jira.atlassian.com/*"],
"js": ["content.js"],
"all_frames": true
}
],
"permissions": ["tabs", "webNavigation", "<all_urls>"]
Listening to window.onpopstate event inside the content script. Although it detects when I click the "Back" and "Forward" arrows in the browser, it doesn't fire when I click the links inside the Filter Results Page.
// content.js
window.onpopstate = () => {
browser.runtime.sendMessage('webNavigation event triggered');
}
How can I run this content script without having to manually reload the page?
Related
It seeems that my content script document.URL always has the same value even when I click on a random <a href link.
In the below function in the content script, I have a function called performclick() which finds a random link on the current document, then clicks it.
Now shouldn't the next time I call performclick(), I get another document object? i.e. document of the currently focused active tab?
Like when I click a link on the main page and it opens a new tab with another website loaded in it, then I need the content script to give me the document of this new tab that has the clicked website link loaded in it.
But some how I always keep getting the document object of the same main page.
Please help
Manifest
{
"manifest_version": 2,
"name": "OSP Updater",
"version": "1.0.0",
"content_scripts": [{
"run_at": "document_start",
"js": ["content.js"],
"matches": [ "<all_urls>" ]
}],
"permissions": [
"background", "webRequest", "webRequestBlocking", "tabs", "<all_urls>"
],
"background": {
"scripts": ["background.js"],
"persistent": true
},
"web_accessible_resources": ["jsui.js"]
}
Content Script
window.onload = function () {
var elm = document.getElementById("my-container");
if (elm != undefined && elm != null) {
//alert("Main Page LOADED!!!");
}
}
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.clickit == "yes") {
performclick();
}
});
function performclick() {
//document.URL is always the same
var links = document.querySelectorAll("a");
if (links.length) {
var linkToClick = links[1];
var clickEvent = document.createEvent('MouseEvents');
clickEvent.initEvent('click', true, true);
linkToClick.dispatchEvent(clickEvent);
}
}
Update #1:
Silly me, it turns out that I was sending a message from my background script to my content script via the first tab.
I did my clicking decision in the background script than sends a signal to the content script so that the content script can do the actual clicking.
So since I was sending message from the background script to the content script in the 1st tab, it lead the document object to always belong to the first tab (i.e. main page).
Hope this helps someone, always check if you are doing messaging then check its logic.
Hello all i want to load the script whether or not user clicks on my extension icon
This is my extension it works great but i want it to work without making the user click on the icon to load the scripts ..
Here is the code .
{
"name": "Injecta",
"version": "0.0.1",
"manifest_version": 2,
"description": "Injecting stuff",
"background":
{
"scripts": ["jquery.js","background.js"]
},
"browser_action": {
"default_title": "Inject!"
},
"permissions": [
"https://*/*",
"http://*/*",
"tabs"
]
}
This is my background.js
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.executeScript({
file: 'jquery.js'
});
chrome.tabs.executeScript({
file: 'inject.js'
});
});
i just want the extension to load all the scripts with the page load. currently user has to click on the icon to load the scripts..
What executeScript does is basically creating a Content Script dynamically. This is called Programmatic Injection.
An alternative method of working with content scripts is specifying them in the manifest. This achieves exactly what you're asking: content scripts are executed automatically when the page is loaded.
"content_scripts" : [
{
"js": ["jquery.js", "inject.js"],
"matches": ["*://*/*"]
}
],
Adjust the matches parameter to only include match patterns for pages you want it to run on.
Make sure to check out the documentation of run_at parameter if you need to fine-tune when injection happens.
if (typeof jQuery === 'undefined') {}
So, I understand that you cannot have background scripts and a default popup together. If this is so, how can I have something similar to a default popup (where there is some simple HTML that appears when you clicked the extension's icon) and have the background script modify the contents of that popup?
Here's the manifest.json
"browser_action": {
"default_title": "Mark this position!",
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["content.js"]
}
],
You absolutely can have both a popup (i.e. default_popup set) and a background page. The background page will have its own lifecycle (with "persistent": false it's an Event page) and the popup will exist as long as it's open.
I guess your confusion stems from the fact that you cannot have a popup and a chrome.browserAction.onClicked listener at the same time.
This is true, but there are other ways to tell your background page that the popup has opened.
You can message the background page from the popup:
// popup.js, should be included in the popup
chrome.runtime.sendMessage({popupOpen: true}, function(response) {
/* process response */
});
// background.js
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if(message.popupOpen) {
/* do stuff */
sendResponse(response);
}
});
If you put the above popup code on the top level, then the background will be informed as soon as the popup opens.
While you can directly access the popup's window from the background (see chrome.extension.getViews), it's recommended that you move the UI logic into the popup itself and communicate with the background using Messaging as above and shared chrome.storage.
I am building a Chrome Extension and I want to inject and run Javascript code into a tab.
For example :
chrome.tabs.query({active: true, lastFocusedWindow: true}, function(selectedTab) {
chrome.tabs.executeScript(selectedTab[0].id, {code: code_});
});
With the code_ variable being :
$('#gbqfq').val('test');
$("#gbqf").submit();
$('#rso > div.srg > li:nth-child(1) > div > h3 > a').click();
This simple script is meant to be executed on google.com and should type and search "test" and click on the first result.
The problem is that after submitting the request, the tab changes its URL and thus loads another page. And it seems that when the page loads, all the scripts injected by chrome.tabs.executeScript disapears.
Is there a way to run a single script through different pages in the same tab ?
My extension should allow the user to run his own script, so it is complicated (maybe impossible?) to know in advance at which point of the script the tab is expected to reload (in order to use several chrome.tabs.executeScript calls).
Here is the manifest.json of my Extension, I am only using a popup (no background, no content_scripts) :
{
"manifest_version": 2,
...
"options_page": "options.html",
"permissions": [
"storage",
"unlimitedStorage",
"tabs",
"windows",
"http://*/*",
"https://*/*"
],
"browser_action":
{
"default_popup": "popup.html"
}
}
No, you cannot run the same script after a tab navigates away, since the JavaScript context in which the script lives is torn down.
So you will need to inject a script again after the page loads.
You probably want to do something along these lines:
Inject your submitting script and save the tab ID.
Initiate a submit.
Listen to chrome.tabs.onUpdated filtered by tab ID above and status "complete".
Check that the URL is the one you expected, then inject your data-gathering script.
I'm trying to stop all tabs from loading when chrome starts up. I then
want to load only the tab I click on.
I was able to do this by using a content script in
manifest.json.
{
"name": "blah",
"version": "1.0",
"background_page": "background.html",
"content_scripts": [
{
"matches": ["http:// */*"],
"js": ["stop.js"],
"run_at": "document_start"
}
] ,
"permissions": [
"tabs", "http://*/*"
]
}
stop.js just contains one line
window.stop();
Now this isn't ideal because, being a content script it stops loading
everytime, including when I click on a tab.
So, I tried doing in in background.html without a content script, but
I can't get it to work:
background.html
<!doctype html>
<html>
<script>
chrome.tabs.getAllInWindow(null, function stopTabs(tabs) {
for (var i in tabs) {
var tab = tabs[i];
//alert(tab.url);
var stopLoading = {'code': 'window.stop();alert("stopped");'}; //alerts work here, but window.stop doesn't?!!
chrome.tabs.executeScript(tab.id, stopLoading);
}
});
</script>
</html>
How do I do this? Loading the clicked tab seems easy, but I need to do this first.
Looks like this problem is related to this bug report, if you star it maybe it will get fixed sooner.