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();
Related
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.
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.
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') {}
I am trying to make a Chrome extension with one line of jQuery code but it doesn't work. I'm trying to trigger a click on an element.
The console of chrome doesn't show any error at all,
and when I put ONLY the jQuery code in console it works fine.
My code:
content.js
$(document).ready(function() {
$('.like_post:contains(Like)').click();
});
background.js
chrome.windows.getCurrent( function(currentWindow) {
chrome.tabs.query({active: true, windowId: currentWindow.id}, function(activeTabs){
chrome.tabs.executeScript(
activeTabs[0].id, {file: 'jquery-2.1.3.min.js', allFrames: true}
);
chrome.tabs.executeScript(
activeTabs[0].id, {file: 'content.js', allFrames: true}
);
});
console.log(currentWindow.id);
});
manifest.json
{
"name": "plugin name",
"version": "0",
"description": "What do I do as an extension",
"manifest_version": 2,
"browser_action": {
"name": "project with jquery",
"icons": ["icon.png"],
"default_icon": "icon.png"
},
"content_scripts": [ {
"js": [ "jquery-2.1.3.min.js", "background.js", "content.js" ],
"matches": [ "http://*/*", "https://*/*"]
}]
}
I have also downloaded the jquery-2.1.3.min.js file and have it in the extension folder.
Can anyone explain why it doesn't work???
The root cause of the problem is that extension content scripts execute in an isolated world. One of the reasons for this is so that your code does not conflict with the page's code: for instance, you can use a different version of jQuery.
So, your content script has its own copy of jQuery. The way jQuery's .click() works is by maintaining a list of event handlers that are triggered by the click..
..and you may see the problem already. The content script's copy of jQuery is not aware of the page's copy list of handlers, and cannot trigger them.
That, by the way, explains why it works when you put it in the console - by default, console executes in the page's context and triggers the page's copy of jQuery.
There are ways to overcome this, but the most straightforward for your task is to emit a proper DOM event, that will be caught by the page's code. See this question for an example.
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.