I am building a Chrome Extension and I am having trouble adding a JavaScript library to use in my content script.
I am trying to add the Mutation Summary Library. I put the 'mutation_summary.js' file into the extension's directory and I tried to add it by adding 'mutation_summary.js' to the 'manifest.json' file as shown below:
"content_scripts": [
{
"matches": ["http://soundcloud.com/*", "https://soundcloud.com/*"],
"js": ["content_script.js", "mutation_summary.js"]
}
An extension error is thrown when I add it. The errors says "Could not load javascript 'mutation_summary.js' for content script.
Am I adding the javascript library incorrectly?
Thanks
It works perfectly for me. I created an extension with a file called mutation_summary.js which contains console.log('FILE LOADED!'); and it shows up as soon as I load soundcloud.com, maybe you had a typo with the file name?
manifest.json:
{
"name": "Extension",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [
{
"matches": ["http://soundcloud.com/*", "https://soundcloud.com/*"],
"js":["mutation_summary.js"]
}
]
}
Related
I want to make a chrome extension which parses youtube/soundcloud/... pages and gets current song's name. Then it should update user's rich presence status in discord. Like a did it in python there.
I have that one so far. Title already parsed, there's no problem. I have a problem with that code works. Because it doesn't work.
const clientId = '605777168739598338';
const scopes = ['rpc', 'rpc.api'];
const client = new RPC.Client({ transport: 'websocket' });
client.connect();
function updatePresence(title, time, icon) {
title = title.replace(/["]/g, "\\\"");
client.setActivity({
details: title,
startTimestamp: time,
largeImageKey: icon
}, 9999)
}
I also tried raw websocket connection but I'm stupid..
UPD:
The code above is in content.js.
browser.js is a file copied from root of module discord-rpc which i downloaded via npm.
manifest.json
{
"manifest_version": 2,
"name": "Tomori Player",
"version": "0.1.0",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["browser.js"]
},
"permissions": [
"ws://localhost:6463/*",
"tabs",
"webRequest",
"webRequestBlocking"
],
"content_scripts": [
{
"matches": [
"https://www.youtube.com/watch*",
"https://youtube.com/watch*"
],
"js": ["content.js"]
}
]
}
P.S. I'm so sorry. I'm new in JS.
There's a solution I found:
Chrome Extension parses page and sends sockets to another app
Another app on your PC gets these sockets and then sends RPC to Discord
Timeraa#7947 (PreMiD dev): Discord will disconnect almost immediately if you connect with a browser, trust me i tried. You will need to have an application running in the background
So, you can use PreMiD and push up PreMiD's presences list or make your own app to do it.
Alright so I'm starting to learn how to build chrome extensions so i can automate some tasks at work.
I Set up my manifest.json file as follows:
{
"manifest_version": 2,
"name": "Test",
"version": "1.0",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
]
}
my content.js file seems to be working fine, when I console.log() stuff it shows up in the website's console. However, when I try to use the .click(); method with query selector, it shows an error.
var this_button = document.querySelector(".nav-link"); this_button[0].click();
The error shown when I try to load the Extension is:
Uncaught TypeError: Cannot read property '0' of null
the websites console reads this error:
Uncaught TypeError: Cannot read property 'click' of undefined
Any ideas? I am not using Jquery and cannot use it for this project, as I cannot download anything external onto work computer. This needs to be done with Vanilla JS.
this_button[0].click() is incorrect - you should be using this_button.click()
I am developing one chrome extension which can extract all the meta tags of the current tab. I am using ReactJs as the main development environment and I have placed my chrome related code in its componentWillMount() method.
componentWillMount() {
const code =
"let metas = document.getElementsByTagName('meta');" +
"let newMetas = []" +
"for (let meta of metas) {" +
" newMetas.push({name: meta.name, content: meta.content});" +
"}" +
"newMetas;";
chrome.tabs.executeScript(null, {
code: code
}, function (results) {
console.log(results); // <=== Here I get 'null' value
if (!results) {
return;
}
})}
this is my manifest.json file
{
"manifest_version": 2,
"name": "Northwind",
"description": "Just a simple all with all northwind employees",
"version": "1.0",
"browser_action": {
"default_icon": "./img/ic-logo.png",
"default_popup": "./index.html"
},
"permissions": [
"http://www.amazon.com/",
"tabs"
],
"web_accessible_resources": ["script.js"],
"content_scripts": [{
"matches": ["http://www.amazon.com/*"],
"js": ["app.js"]
}
]
}
app.js is the build file generated by the react.
I have been reading and searching for this but did not get any clues of why it's not working.
Another issue is that when I put console.log('done') in my script, it's not displayed as well so I guess there is some problem with the config as well.
Thanks so much for your help.
When you are using chrome.tabs.executeScript you have to specify host in the permissions field of the manifest.
It is called programmatic injection:
To insert code into a page, your extension must have cross-origin permissions for the page. It also must be able to use the chrome.tabs module. You can get both kinds of permission using the manifest file's permissions field.
This question already has answers here:
TypeError: [API] is undefined in content script or Why can't I do this in a content script?
(2 answers)
Closed 5 years ago.
I am using the Developer Version of Firefox (Version 54.0a2, but also tried the normal Firefox with Version 51) and I want to include notifications in my web extension.
browser["notifications"] does not exist though.
Since it was not working in my extension and I thought maybe something was conflicting I created this very basic web-extension.
the manifest.json:
{
"manifest_version": 2,
"name": "Extension",
"version": "1.0",
"description": "...",
"icons": {
"48": "icons/icon-48.png"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["test.js"]
}
],
"permissions": ["notifications", "storage"]
}
test.js (storage works just fine btw.)
if (browser["notifications"]) {
console.log('Notifications exist!');
browser.notifications.create({
"type": "basic",
"iconUrl": browser.extension.getURL("icons/icon-48.png"),
"title": "test",
"message": "test"
});
}
else {
//it always executes this part :/
console.log('notifications do not exist');
console.log(browser);
}
Debugging the add-on doesn´t show any errors either.
Many of the apis exclusive for extensions can only be run inside background script. The usual technique if you need to run it from a content script is to send a message from content script to background script, handle the message in background script and run from there the command you wanted.
In your case, there are a few examples at the end of Notification Api, one of them being notify-link-clicks-i18n where you can view how they do the message passing to create the notification from the background script.
I'm writing a chrome extension and trying to execute a script on my page.
My manifest.json includes:
"permissions": ["tabs"],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["js/jquery.js", "js/content.js"]
}
]
And on my content.js page I have:
chrome.tabs.executeScript( null, {code:"document.write('hello world')"},
function(results){ console.log(results); } );
According to google's documentation, passing a null parameter has it refer to the active tab and I can then pass the javascript as a json object, which I am. However... no result? Any advice? Ideally, I'd like to to change document.write to a window command to get the the user's highlighted text.
You must have permissions for injecting script in a webpage...
for example
"permissions": [ "http://stackoverflow.com/"]
If you like to inject in all web pages you should specify:
"permissions": [
"<all_urls>", ].