Why is .click() not working in Chrome Extension? - javascript

Alright so I'm starting to learn how to build chrome extensions so i can automate some tasks at work.
I Set up my manifest.json file as follows:
{
"manifest_version": 2,
"name": "Test",
"version": "1.0",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
]
}
my content.js file seems to be working fine, when I console.log() stuff it shows up in the website's console. However, when I try to use the .click(); method with query selector, it shows an error.
var this_button = document.querySelector(".nav-link"); this_button[0].click();
The error shown when I try to load the Extension is:
Uncaught TypeError: Cannot read property '0' of null
the websites console reads this error:
Uncaught TypeError: Cannot read property 'click' of undefined
Any ideas? I am not using Jquery and cannot use it for this project, as I cannot download anything external onto work computer. This needs to be done with Vanilla JS.

this_button[0].click() is incorrect - you should be using this_button.click()

Related

How to inject javascript on Chrome to modify navigator webdriver

In order to make my Chrome Browser undetectable when using Selenium I'm trying to modify the get function on the webdriver to answer always with false. To do so, I've created a Chrome Extension that consist of two files:
1) Manifest.json (It essentialy says that my custom javascript should be injected in the page ASAP)
{
"manifest_version": 2,
"name": "webdriverInjector",
"version": "1.0.0",
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["injected-javascript.js"],
"run_at": "document_start"
}
]
}
2) Injected-javascript.js
if (document.readyState === "loading") {
Object.defineProperty(navigator, 'webdriver', {
get: () => false,
});
console.log(window.navigator);
}
I was able to successfully install the Extension on Chrome and it works: on the console I can see that the property is set:
But after the page is fully loaded I'm not able to see the same property because it seems that it doesn't exist anymore and this is really strange. Isn't my property supposed to exist even after other script execution?
Here is the result of the console.log(navigator) I get after the page is fully loaded:
And if I try to console.log the navigator.webdriver variable I get "undefined" (if I was using Chrome without Selenium) or I get "true" (if I was using Chrome with Selenium) but never "false" as expected.
What am I doing wrong?

Getting ""Uncaught TypeError: Could not add listener" When Using " chrome.webNavigation.onCompleted.addListener"

When trying to use Chrome's WebNavigation.onCompleted to run background.js on a certain url I get the error
"Uncaught TypeError: Could not add listener".
For permissions in my manifest.json I have given the extension access to activetab and webrequest.
I have tried using other listeners like
chrome.browserAction.onClicked.addListener
and it worked perfectly. I am also using the latest version of chrome (v73).
background.js :
chrome.webNavigation.onCompleted.addListener(function(tab) {
var eurl = tab.url.split("/skill/");
if(eurl[0] === "https://www.duolingo.com") {
chrome.tabs.executeScript(tab.ib, {
file: 'jquery-3.3.1.min.js'
});
chrome.tabs.executeScript(tab.ib, {
file: 'duohelperinjector.js'
});}
}, {url: [{urlMatches : '*://duolingo.com/skill/*'}]});
manifest.json :
{
"name": "DuoHelper",
"version": "0.0.1",
"manifest_version": 2,
"description": "A Chrome Extension That Helps With Duolingo",
"homepage_url": "https://github.com/TechHax/DuoHelper",
"background": {
"scripts": [
"background.js"
],
"persistent": true
},
"browser_action": {
"default_title": "DuoHelper"
},
"permissions": [
"webNavigation",
"activeTab"
]
}
The error I'm getting:
Uncaught TypeError: Could not add listener
I would, with the extension working properly, like to have the chrome extension inject the javascript files on the active tab if its url is *://duolingo.com/skill/*.
See the documentation: urlMatches is a RE2 regular expression, not a URL match pattern.
Solution 1.
The correct RE2 expression would be 'https?://(www\\.)?duolingo\\.com/skill/.*'
Solution 2.
A better approach is to do a plain string comparison of the host name and path because it's much faster than using regular expressions and the documentation explicitly advises to use regexps only when absolutely unavoidable:
chrome.webNavigation.onCompleted.addListener(info => {
chrome.tabs.executeScript(info.tabId, {file: 'jquery-3.3.1.min.js'});
chrome.tabs.executeScript(info.tabId, {file: 'duohelperinjector.js'});
}, {
url: [{
hostSuffix: '.duolingo.com',
pathPrefix: '/skill/',
}],
});
Note how hostSuffix utilizes an implicit dot added by the API before the first component to match any subdomain of duolingo.com. Also, the callback parameter is not a tab, but a different object with tabId inside.
Solution 3.
Use declarativeContent API as shown in the documentation, but instead of ShowPageAction specify RequestContentScript, which despite the warning in the documentation actually works in the stable Chrome.

Add JS Library to Chrome Extension

I am building a Chrome Extension and I am having trouble adding a JavaScript library to use in my content script.
I am trying to add the Mutation Summary Library. I put the 'mutation_summary.js' file into the extension's directory and I tried to add it by adding 'mutation_summary.js' to the 'manifest.json' file as shown below:
"content_scripts": [
{
"matches": ["http://soundcloud.com/*", "https://soundcloud.com/*"],
"js": ["content_script.js", "mutation_summary.js"]
}
An extension error is thrown when I add it. The errors says "Could not load javascript 'mutation_summary.js' for content script.
Am I adding the javascript library incorrectly?
Thanks
It works perfectly for me. I created an extension with a file called mutation_summary.js which contains console.log('FILE LOADED!'); and it shows up as soon as I load soundcloud.com, maybe you had a typo with the file name?
manifest.json:
{
"name": "Extension",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [
{
"matches": ["http://soundcloud.com/*", "https://soundcloud.com/*"],
"js":["mutation_summary.js"]
}
]
}

Cannot call chrome.alarms.create() from a content script

I'm developing a Chrome extension right now.
My problem is that when I call chrome.alarms.create(), I get the following error:
Uncaught TypeError: Cannot read property 'create' of undefined
I have these files in my extension package:
manifest.json
{
"manifest_version": 2,
"name": "Tool",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"permissions": ["background", "tabs", "webNavigation", "alarms"]
}
myscript.js
chrome.alarms.create("aaa", {"when":Date.now()+5000});
chrome.alarms.onAlarm.addListener(function(alarm){
console.log("hello");
});
background.js
chrome.pageAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "myscript.js"});
});
When I call chrome.alarms.create() in background.js, it works fine.
But, when I call the function in myscript.js, it causes the error.
What is the cause and how can I fix this problem?
You can't access most Chrome APIs from a content script. You will need to use the Messaging API to send a message to the background page which can then call the Alarms API.
https://developer.chrome.com/extensions/messaging
https://developer.chrome.com/extensions/content_scripts

Setting local storage in a Chrome extension

I'm using the following code to set local storage in a Chrome extension.
localStorage.setItem('userkey','123');
/* I've also tried this:
chrome.storage.sync.set({'userkey': 123}, function() {
// Notify that we saved.
message('Settings saved');
});
*/
manifest.json:
{
"manifest_version": 2,
"name": "Shopaholic",
"description": "All the latest sale items from your favourite clothes shops right on your home screen",
"version": "1.0",
"chrome_url_overrides": {
"newtab": "index.html"
},
"content_scripts": [
{
"matches": ["*://*/index.html"],
"css": ["css/style.css"],
"js": ["js/jquery.min.js"]
}
],
"options_page": "options.html",
"permissions": [
"storage"
]
}
However, I'm getting this error:
Uncaught SecurityError: Failed to read the 'localStorage' property
from 'Window': The document is sandboxed and lacks the
'allow-same-origin' flag.
If I use the commented out code above, I get:
Uncaught TypeError: Cannot read property 'sync' of undefined
Where have I gone wrong?
Read this - https://en.wikipedia.org/wiki/Same_origin_policy
Basically, its a web application security model concept.
So, to avoid this u need to disable the same origin policy on google chrome
So, if on desktop, open chrome from command line with this command
chrome.exe --disable-web-security
and then run your script, it shouldn't give this error then!

Categories