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?
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 building an Edge extension. I'm trying to get the exact same element as this question asks, but I want to use JS, not Selenium.
Element
I'm running the JS through my extension's background script. In the future, I would like the popup to have a button and that button to read the syllable on screen.
The provided solution is in Selenium and I'd like to transpile it into JS.
driver.switch_to_frame(driver.find_element_by_xpath("//div[#class='game']/iframe[contains(#src,'jklm.fun')]"))
If none of this works, I guess I'll have to use optical text recognition.
Here's manifest.json
{
"name": "myName",
"description": "myDescription",
"version": "1.0.0",
"manifest_version": 3,
"icons": {
"128": "myIcon.png"
},
"content_scripts": [
{
"matches": [
"https://jklm.fun/*"
],
"js": [
"js/myScript.js"
]
}
]
}
Inside js folder, here's myScript.js
console.log('myscript is running')
const syllableHandler = () => {
const iframe = document.getElementsByTagName("iframe")
console.log(iframe?.[0]?.contentWindow)
}
document.addEventListener('keydown', syllableHandler)
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 developing a chrome extension, where I use my trained keras model. For this I need to import a library tensorflow.js. How should I do that?
I tried to import tensorflow.js in my project by two ways:
in background.js by import * as tf from '#tensorflow/tfjs';
I downloaded tf.min.js and tried to add it in my manifest.json
manifest.json
{
"manifest_version": 2,
"name": "my_project",
"version": "0.1",
"background": {
"scripts": ["background.js", "tf.min.js"]
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["jquery-3.1.1.min.js","content.js"]
}
]
}
In the first case the error was "unexpected token *";
and in the second case the error was Uncaught (in promise) ReferenceError: tf is not defined.
What did I do wrong?
I downloaded tf.min.js and tried to add it in my manifest.json
Try putting the tf.min.js first, like this:
{
"background": {
"scripts": ["tf.min.js", "background.js"]
}
}
The scripts are loaded in the order you specify them and if you want to be able to use things from tf.min.js inside of background.js, tf.min.js has to be loaded first.
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.