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.
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)
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"]
}
How I can include an npm library inside a chrome extesion that isn't using webpack? I want to call a library inside my background.js file but also if I declare the library inside the manifest background scripts section, it will not be available into background script and this error is logged: background.js:8 Uncaught ReferenceError: lamejs is not defined
Any help please?
manifest.json
{
"manifest_version": 2,
"name": "test extension",
"description": "test",
"permissions": [
"https://*",
"webRequest",
"activeTab",
"downloads"
],
"background": {
"scripts": [
"js/background.js",
"js/lame.min.js"
],
"persistent": true
},
"browser_action": {
},
"version": "1.0.0",
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
background.js
const mp3encoder = new lamejs.Mp3Encoder(1, 44100, 128);
// other code here
Remember that the scripts are loaded linearly. This means that the order of the loaded scripts is very important. Always place your background.js at the end in that array. This part of your code, const mp3encoder = new lamejs.Mp3Encoder(1, 44100, 128) wont be available at the time you use it because you're loading lamejs after background.js has been loaded.
This is your code:
"background": {
"scripts": [
"js/background.js",
"js/lame.min.js"
],
Do this instead:
"background": {
"scripts": [
"js/lame.min.js",
"js/background.js"
],
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.