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)
Related
I have been working on an extension (google chrome only for now) that is supposed to add features to my school's online learning environment. This website (not actually run by the school itself) uses Angular for the front-end.
For the extension I am using Typescript, with Parcel. The scripts that are running on the webpages are content-scripts.
I am trying to add an item to the menu-bar that is on the left. This is what I've tried:
Inserting pure HTML into the ul element, but this breaks the entire menu-bar and the user is unable to use it after.
Use Angular (installed via NPM) in the content-script to find the scope of the menu-bar element, then add the new option (Menu-bar is an array) and then apply it. Although this also seems to not work, like so:
Expected behaviour (using browser console)
let target = document.getElementsByClassName("main-menu")[0];
let menu = angular.element(target);
console.log(menu);
>>> p.fn.init [ul.main-menu, context: ul.main-menu]
Received Behaviour (from content-script)
let target = document.getElementsByClassName("main-menu")[0];
let menu = angular.element(target);
console.log(menu);
>>> p.fn.init [ul.main-menu]
The absence of the context makes me think that my content-script and the webpage's script are not running in the same scope. Is that correct? I am not able to use the .scope() method in the content-script either.
This is my manifest.json for the plugin. Please let me know
{
"name": "Magister Plus",
"description": "TBD",
"version": "0.0.1",
"manifest_version": 3,
"permissions": [
"activeTab",
"scripting",
"tabs"
],
"background": {
"service_worker": "./background/background.js"
},
"host_permissions": [
"https://*.magister.net/*"
],
"content_scripts": [
{
"matches": ["https://*.magister.net/*"],
"js": ["./content/domain.js"]
},
{
"matches": ["https://*.magister.net/magister/#/vandaag"],
"js": ["./content/vandaag.js"]
}
],
"action": {}
}
I am not really sure what to do here anymore, since I am not really familiar with Angular.js at all.
Thanks for any help!
To change html you need to use appendChild or insertAdjacentHTML, but not innerHTML. 2) To access context property you need to run that part of code in page context.
By #wOxxOm
This worked indeed! Thank you so much!
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 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 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 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?