How to make content scripts match new tabs in firefox addons/extensions? - javascript

I know normally you just set the URL next to matches like - "matches": ["<all_urls>"], but I could not find any documentation of what the URL is for new tabs in firefox, I could only find that URL for chrome.
Heres my manifest.json -
{
"manifest_version": 2,
"name": "TestExt1",
"version": "1.0",
"icons": {
"48": "icons/icon1.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["TestExt1.js"]
}
]
}
I read another post on here about making a button opening a new tab using "_blank", so I tried setting my matches to "matches": ["_blank"], in the manifest file but that did not work. I have confirmed my issue is not with the javascript file because it works on every other URL.
How can I set my scripts to only make changes to new tabs?
Or is this something I have to make happen within the content script files themselves?

the default new tab page with the tiles is about:newtab
the default home page is about:home
for a blank page use about:blank
See the about:about page for available about pages.

Related

Chrome extension - Document.getelementbyId(...) evaluating to null?

In console I can input document.getElementById('...') and get a value back. Or even .textContent and get the string I want.
Once I pop this into my chrome extension and run it, it evaluates document.getElementById('...') as null. What's up?
Manifest.json:
{
"name": "CSUF RMP",
"version": "0.1",
"manifest_version" : 2,
"description": "Displays professor ratings on icon click",
"background" : {
"scripts" : ["background.js"]
},
"browser_action": {
"default_icon": "icon16.png"
},
"content_scripts": [
{
"matches": ["https://mycsuf.fullerton.edu/*"],
"js": ["script.js"]
}
],
"permissions": ["<all_urls>", "*://*/*", "http://*/*", "https://*/*"]
}
Background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "script.js"});
});
My script.js is literally what I posted at the top. The script is supposed to have access to the web page's DOM (thus I need a content script) and run it on click of the icon (hence the background.js)
I can get the page to run and show an alert or something, but that line isn't evaluating the page's dom, just null.
I think I know what is the problem here,
you are executing script.js just like a normal script, and a normal script can't interact with the page DOM, you can think about it as just runing a script from a file- it don't have the content script's privileges that way.
What you can do is open a new tab (with the url of the content script), and then pass to the content script at that new tab a message which tells him to run a specific function there.
You can test it without using message sending by setting the onload of the content script to something like: onload=alert(document.getElementById('...')); and than open a new tab from the background page: chrome.tabs.create({"url":"https://mycsuf.fullerton.edu"});
tell me how it goes :)
Edit: forgot to mention that you need the 'tabs' permission in your manifest file in order to open new tabs and test the thing out.

Chrome extension to load the script without clicking on icon

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') {}

Chrome Extension to click on page load

I am trying to create a chrome extension that will click a link when the page of a certain site is loaded/refresh. So far I have not been able to get it to work, I've tried different code snippets from different sources but no matter what I try it still doesnt do anything.
My manifest looks like this --
{
"name": "SITENAME",
"manifest_version": 2,
"version": "1",
"content_scripts": [
{
"matches": ["*://SITENAME.com/*"],
"js": ["sitenamelink.js"]
}
], "permissions": [
"tabs" , "*://SITENAME.com/*"
]
}
The site will have random dynamic variables appended to the end of it, such as "sitename.com/product/model...etc. etc." so theres really no way for it to be predictable, only way would to find the page url and update the extension everytime which is not something I want to have to do.
I was trying to keep the js coding clean and simple and the js I have now is --
$(document).ready(function(){
$('#addToCartLink').trigger('click');
});
I also tried this --
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('a#addToCartLink')[0].click();
});
and this --
$(document).ready(function(){
$('a#addToCartLink')[0].click();
});
The page that has the link, has it coded as such -- <a id="addToCartLink" href="javascript:addToCart()" onclick="showBubble(this)" onmouseout="hideBubble()"><span>Add to Cart</span></a>
Im not sure how to inspect it to see where my code is failing because when I inspect with chrome, it only shows the js errors from that page's coding.
So what am I doing wrong? Any help is much appreciated. Thanks.
Here's a test page, the size is selected if you follow this link, and now only requires for the add to cart link to be clicked. -- Test Page
My sample extension (see code below) worked fine for me.
E.g.: Visiting the Test Page you provided, the ADD TO CART link is clicked and the item is added to cart.
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"offline_enabled": false,
"content_scripts": [{
"matches": ["*://*.sitename.com/*"],
"js": ["content.js"],
"run_at": "document_end",
"all_frames": false
}]
}
content.js:
document.getElementById('addToCartLink').click();

Open Chrome extension from link on website

I would like to open a Chrome extension (acting as a background page) from a link on my website.
Things I have tried:
Make an a tag linking to the extension's main HTML page.
Sending the user to a page which does a 302 redirect to the HTML page.
Using Javascript to redirect the user, with window.location = ...
All of these do not work and open an about:blank page instead. The exception (which seems odd) is when I use strategy #2 and the link is opened from my desktop mail client.
Any ideas as to how this can be accomplished? Requesting the tabs permission is not possible in our case.
Try reading about message passing from a webpage to a background page of your extension (sounds like a thing you want to accomplish).
You need to add the taregt HTML file in the web_accessible_resources section of your manifest. E.g.:
Extension file-structure:
root-dir/
|_____manifest.json
|_____content.js
|_____myfile.html
content.js:
/* Append a link to the web-page's body */
var a = document.createElement("a");
a.href = chrome.extension.getURL("myfile.html");
a.target = "_blank";
a.textContent = "My HTML file";
document.body.appendChild(a);
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"offline_enabled": true,
"content_scripts": [{
"matches": ["*://*/*"],
"js": ["content.js"],
"run_at": "document_end",
"all_frames": false
}],
"web_accessible_resources": ["myfile.html"]
}

Stop chrome from loading all tabs on startup in my extension?

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.

Categories