I'm trying to write Chrome Extension in pure javascript to fetch a collection of nodes and make some changes to it. So, I started off with:
var list = document.getElementsByClassName("testclass");
console.log(list); //1
console.log(list.length); //2
console.log(list[0]); //3
The output for this comes up as:
1. An object [item:function, namedItem:function], which has all the elements and a length: <number of elements> and __proto___: HTMLCollection (As Expected)
2. 0
3. undefined
The same thing, which I give in jsfiddle, I get proper outputs:
1. HTMLCollection object with all elements and length: <no of elements> and __proto__: HTMLCollection
2. <no of elements>
3. First Element
Why am I unable to iterate when the javascript used is them same? Is there something else to do when we are using a Chrome extension?'
Heres my manifest.json in case it helps:
{
"manifest_version": 2,
"name": "Something",
"description": "Something something...",
"version": "1.0",
"permissions": [
"tabs",
"notifications",
"http://*/",
"https://*/"
],
"content_scripts": [{
"matches": ["https://*","http://*"],
"js": ["testscript.js"],
"run_at": "document_end"
}],
"web_accessible_resources": ["samplejs.js"],
"browser_action": {
"default_popup": "popup.html"
}
}
My javascript code is in testscript.js
Well, I did some modifications in your manifest file and it worked for me. Here is the updated version:
{
"manifest_version": 2,
"name": "Something",
"description": "Something something...",
"version": "1.0",
"permissions": [
"tabs",
"notifications",
"http://*/",
"http://*/*",
"https://*/*"
],
"content_scripts": [{
"matches": ["https://*/*", "http://*/*"],
"js": ["testscript.js"],
"run_at": "document_end"
}],
"web_accessible_resources": ["samplejs.js"],
"browser_action": {
"default_popup": "popup.html"
}
}
I have changed the permissions and matches sections.
Found a solution. The problem was that the DOM was not getting loaded fully, hence my script which executed before DOM got loaded, could not fetch data properly is what I am guessing.
I tried using
document.onload=function(){}
and
window.onload=function(){}
window.onload had trouble fetching the output, and document.onload never triggered at all.
So, tried using a delay:
setTimeout(function(){
<javascript code>
},3000);
And this works fine. Not sure if its the best method.
As an alternative, added jquery to the extension and used:
$(document).ready(function(){
<javascript code>
});
And this works even better.
Related
I'm using chrome extension to automate my few tasks, one of them is to select the date from datepicker. but i'm unable to perform actions on Jquery UI datepicker by using its methods such as:
$(".hasDatepicker").datepicker("setDate", new Date("01/03/2022"));
or getting date:
$(".hasDatepicker").datepicker("getDate");
i display the result in console and it returns undefine.
Inside manifest file, i also included the jquery-ui.js file, here it is:
{
"manifest_version": 3,
"name": "Auto Cart",
"version": "1.0",
"content_scripts": [
{
"matches": [
"https://www.billetterie-parismusees.paris.fr/*"
],
"js": [
"jquery.js",
"jquery-ui.js",
"content.js"
]
}
],
"action": {
"default_popup": "popup.html"
},
"permissions": ["storage","activeTab"]
}
Important:
I can get and set values of datepicker from console but it doesn't work from content-script.js file.
Can anyone pls help me in resolving this issue?
I'm trying to load jQuery into content script when page is loaded.
All works great until couple days ago when some users started to get errors.
Uncaught ReferenceError: $ is not defined
I was thinking what can cause this problem, because all works great.
Part of manifest file:
"content_scripts": [
{
"all_frames": true,
"js": [
"js/jquery-3.6.0.min.js"
],
"css": [
"css/overlay.css"
],
"matches": [
"https://coolsite.com/*"
],
"runAt": "document_start"
},
{
"all_frames": true,
"js": [
"content/content1.js"
],
"matches": [
"https://coolsite.com/*",
],
"runAt": "document_end"
}]
Code of content1.js
$(document).ready(function () {
// Broadcast runner loaded
chrome.runtime.sendMessage({
callback: true,
runnerLoaded: true
});
});
The problem is something about jQuery, couldn't find out why.
I will be so thankful for some help.
Thank you,
Ori
For research purposes, I am trying to write a web-extension that override some part of the web APIs (for example setItem, getItem, or removeItem from the Storage interface).
Unfortunately, when trying the following:
index.js
Storage.prototype.setItem = function(a, b) { return 42; }
manifest.json
{
"manifest_version": 2,
"name": "cool-extension-name",
"version": "1.0",
"description": "A useful description.",
"icons": {"48": "icons/potatoes.jpg"},
"content_scripts": [{
"run_at": "document_start",
"matches": ["<all_urls>"],
"js": ["index.js"]
}]
}
Then using web-ext run, and opening Firefox's WebConsole after loading any webpage.
$ window.localStorage.setItem(1, 2)
undefined
I would have hoped it to return 42.
What happened?
You need to run the code via window.eval() to access the context of the web page itself. For example:
browser.tabs.executeScript(1, {
code: 'window.eval("Storage.prototype.setItem = function(a, b) { return 42; }")'
})
See also:
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Using_eval_in_content_scripts
I am trying to create a basic Ember app to then stick into a Chrome extension. I want the Chrome extension to takeover the newtab functionality. The end goal is to see the Ember Welcome App whenever I open a new tab.
Here is my manifest.json:
{
"manifest_version": 2,
"name": "My Cool Extension",
"version": "0.1",
"description": "Build an Extension!",
"permissions": ["storage", "activeTab", "geolocation"],
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["jquery-2.2.4.min.js", "content.js"]
}
],
"browser_action": {
"default_icon": {
"16": "icon.png"
}
},
"chrome_url_overrides": { "newtab": "index.html" }
}
I am running Ember CLI 3.10 and this is a fresh EmberJS app. I ran ember build --environment production and copied over the dist folder into my chrome folder that contains my manifest.json. I'm referencing my built index.html file in my manifest.json. The problem I'm running into is that when I open a new page, I get UnrecognizedURLError: /index.html that originates from my fingerprinted vendor.js. Why is that? How can I fix this?
Ah! I needed to set locationType to 'none' in my config/environment.js file:
module.exports = function(environment) {
let ENV = {
modulePrefix: 'my-project',
environment,
rootURL: '/',
locationType: 'none', // changed from 'auto'
…
}
The idea was to disable URL management.
I want to create a Chrome extension that replaces (overrides) existing function on a specific website.
I tried to define the manifest like this:
{
"name": "My extension",
"version": "1",
"description": "desc",
"manifest_version": 2,
"content_scripts": [
{
"matches": ["http://www.mywebsite.com/*"],
"js": ["jquery-1.3.2.js", "content.js"]
}
]
}
And I put the new function in content.js, but it's not working. How can I fix it?
EDIT:
My content.js file contains a single Javascript function. it looks like this:
function fullLoad(ent)
{
loadNow(ent);
}
I want that this function will override the real fullLoad function in the website.
How can I do it?