I'm writing a Chrome extension that will redirect me to a URL when clicking on the browser action icon.
I'm trying to use:
chrome.browserAction.onClicked.addListener
but I get
Uncaught TypeError: Cannot read property 'onClicked' of undefined
This is my manifest file:
{
"name": "first extension",
"version": "2.2.12",
"description": "redirct to a link icon",
"browser_action": {
"default_icon": "icontest.png",
"default_title": "Do action"
},
"permissions": ["tabs", "http://*/*"],
"content_scripts": [{
"matches": ["http://*.twitter.com/*", "https://*.twitter.com/*"],
"js": ["twterland.js"]
}],
"icons": {
"16": "icontest.png",
"48": "icontest.png",
"128": "icontest.png"
}
}
This is my js file:
chrome.browserAction.onClicked.addListener(function(tab) { alert("hi"); });
ManifestV3
manifest.json: use action not browser_action, see also the migration guide.
"action": {},
"background": {"service_worker": "background.js"},
background.js: use chrome.action not chrome.browserAction.
Classic ManifestV2
For those who already have added something like
"background": {
"scripts": ["background.js"]
}
and still gets Cannot read property 'onClicked' of undefined - just add
"browser_action": {}
into your manifest.json
It seems like the code is in your twterland.js file, which is your content script. browserAction can only be used in extension pages, so you can not use it in content scripts.
Document: https://developer.chrome.com/extensions/content_scripts
However, content scripts have some limitations. They cannot:
- Use chrome.* APIs (except for parts of chrome.extension)
- Use variables or functions defined by their extension's pages
- Use variables or functions defined by web pages or by other content scripts
Put it on the background page instead.
If you do not have a "browser_action" property defined in your manifest.json then this error may occur. #Kirill's answer works but you also have to add a blank icon.png file else chrome will throw an error that it cannot find such a file.
Adding this to the manifest.json file should suppress this is error:
"browser_action": {}
Be sure to read the documentation for further reference on how to use the "browser_action" setting.
The same problem may appear if you are using manifest_version 3.
In this case
"background.scripts" should be replaced with "background.service_worker"
"browser_action" should be replaced with "action"
in js code chrome.browserAction should be replaced with chrome.action
detailed information could be found here: Manifest version 3 migration documentation
I was also getting this, adding
"persistent": true
to my background declaration in manifest.json solved it.
Please notice that you can heave only one of app, browser_action, page_actions present in your manifest.json file.
For example, to use the chrome.browserAction.setBadgeText you should have the browser_action field in your manifest.json.
Make sure we don't have jquery.js before background.js in the scripts array of background in manifest.json.
"background": {
"scripts": ["background.js","jquery.js"]
}
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?
My firefox add-on currently has the main file organizer.js and just does not run when I import stuff from other js files (footer.js and header.js).
manifest.json
{
"manifest_version": 2,
"name": "Course Organizer",
"version": "1.0",
"description": "Keep the hassles that come with UI of class schedule at bay and make your course selection process smooth and seamless",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["*://*.my.wasabi.edu/e/reg/soc-view/results.asp*"],
"js": ["organizer.js", "footer.js", "header.js"],
"css": ["index.css"]
}
]
}
organizer.js (the relevant part)
import hello from 'footer'
import head from 'header'
console.log(hello + head)
footer.js
let hello = 'haha'
export {hello}
header.js
let head = 'head'
export {head}
I did some research and found out the js files are loaded in the specified order in the array, so I messed around with it but to no avail. Whenever I comment out the imports, it runs again.
I got it work the way I want now and figured out it is prohibited to use import/export in JS files in an extension. If you are trying to divide a big chunk of code in one file into many files, go ahead and cut/paste them to as many new files as you like. Be aware of the order of the files in "content-scripts" as they will be loaded to web in that order and you do not want to refer to an element that does not exist in DOM yet because it is created in next files.
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)
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.