I want to create my first Firefox-Addon so I am really inexperienced.
I want to create an Addon, to modify the YouTube-Website.
background.js
function editVideo() {
document.getElementsByTagName("video")[0].playbackRate = 2;
document.getElementById("movie_player").stopVideo();
document.getElementById("movie_player").setPlaybackQuality('hd720');
document.getElementById("movie_player").playVideo();
}
browser.browserAction.onClicked.addListener(editVideo);
manifest.json
{
"description": "YouTube-Test",
"manifest_version": 2,
"name": "YouTube-Test",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": {
"48": "icons/logo_48.png",
"64": "icons/logo_64.png"
}
}
}
So if I click the Button, the Playbackrate should be 2 and the quality 720p.
But nothing happens! If I type thoose commands directly into the console, it works.
I always get this error:
document.getElementsByTagName(...)[0] is undefined
or:
document.getElementById(...) is null
I would appreciate your help.
{
"description": "YouTube-Test",
"manifest_version": 2,
"name": "YouTube-Test",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["https://www.youtube.com/*"],
"js": ["runsOnWebPage.js"],
"run_at": "document_idle"
}
],
"browser_action": {
"default_icon": {
"48": "icons/logo_48.png",
"64": "icons/logo_64.png"
}
}
}
The js file within the content_scripts should now run on youtube, you might want to add more "matches" since this one only covers that specific link, and youtube has like 1000 different links
Related
I'm trying to build an extension to monitor the xhr portion of the devtools network tab. I decided to start as simple as possible with the background script below. I'm seeing no errors on loading the extension, but don't see any output in the console.
manifest.json:
{
"manifest_version": 3,
"version": "1.0",
"name": "Hello World!",
"description": "Learning how to make a chrome extension!",
"icons": {
"16": "images/puppy16.png",
"48": "images/puppy48.png",
"128": "images/puppy128.png"
},
"action": {
"default_icon": "images/puppy.png",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"host_permissions": [
"https://cnn.com/*"
],
"permissions": [
"webRequest"
]
}
In my background.js:
(function () {
chrome.webRequest.onCompleted.addListener(
function (details) {
console.log('HELLO THERE!!!!', details);
},
{ urls: ["<all_urls>"] }
);
}());
What am I doing wrong?
I'm writing a Chrome plugin for my needs. I'd like to be able to select HTML elements like Adblock Plus do to be able to watch changes on the element and its children. I use MutationObserver in my content.js.
How can I to make it work the way I want? I'd like to trigger it from the popup menu. I see there's this API: chrome.devtools.inspectedWindow, probably I can make use of it somehow?
manifest.json
{
"manifest_version": 2,
"name": "PageFontStyle",
"version": "1.0",
"description": "Changes font style on page",
"devtools_page": "devtools.html",
"icons": {
"128":"icon128.png",
"48":"icon48.png",
"16":"icon16.png"
},
"browser_action": {
"default_icon": "icon16.png",
"default_popup": "popup.html",
"default_title": "Page Font Style"
},
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery-3.3.1.min.js", "content.js"],
"css": ["content.css"]
}
],
"permissions": [
"tabs",
"activeTab"
]
}
I am learning to how to make a chrome extension and trying to make popup js alert hello when a button is clicked.
background js
chrome.runtime.onMessage.addListener(function(request,sender,sendResponse){
if(request.todo=="showPageAction"){
chrome.tabs.query({active:true,currentWindow:true}, function(tabs){
chrome.pageAction.show(tabs[0].id);
});
}
});
popup.js
document.addEventListener('DOMContentLoaded',function(){
$('#btnChange').click(function(){
chrome.tabs.query({active:true,currentWindow:true},function(tabs){
chrome.tabs.sendMessage(tabs[0].id,{todo:"clickAll"})})
});
});
content.js
chrome.runtime.sendMessage({todo:"showPageAction"});
chrome.runtime.onMessage.addListener(function(request,sender,sendResponse)
{
if (request.todo =="clickAll"){
alert("alert");
}
});
manifest.json
{
"name": "alert",
"version": "1",
"description": "alert ",
"permissions": ["declarativeContent","activeTab","storage","https://*","tabs"],
"options_page": "options.html",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["https://*"],
"js": ["content.js", "jquery.js"],
"run_at": "document_start",
"all_frames": true
}
],
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"128": "images/img.png"
}
},
"icons": {
"128": "images/img.png"
},
"manifest_version": 2
}
The code does not work when first time installed and requires refreshing to work. what can I do to make it work on first installation?
I am adding this listener in background.js file which is a background script
chrome.tabs.onActivated.addListener( function(info) {
chrome.tabs.get(info.tabId, function(tab) {
chrome.tabs.reload();
});
});
But in the chrome object tabs are not there.
The manifest file is
{
"name": "Tab Logger",
"description": "Logs the clicked tabs with time",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"permissions": [
"tabs"
],
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}
Can anybody tell me what am I doing wrong?
chrome.tabs API is not listed as supported for Apps, and your manifest is for an app and not an extension.
You will need to either make an extension, or not use tabs API.
To convert your manifest to an extension simply change
"app": {
"background": {
"scripts": ["background.js"]
}
},
into
"background": {
"scripts": ["background.js"]
},
I would like my Chrome Extension to on show up on google and amazon. My manifest.json looks like this:
{
"background": {"scripts": ["background.js"]},
"content_scripts": [
{
"matches": ["*://*.google.com/*", "http://www.amazon.com/*", "*://*.amazon.com/*"],
"js": ["background.js"]
}
],
"name": "Denver Public Library Lookup",
"description": "Does Stuff",
"homepage_url": "http://www.artifacting.com",
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png" },
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"version": "1.0",
"manifest_version": 2
}
But it doesn't show up on either google or amazon and I can't figure out why.
Here is my background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {file: "bookmarklet.js"})
});
And here is the bookmarlet.js
setTimeout('x99.focus()', 300);
var re = /([\/-]|at[at]n=)/i;
if (re.test(location.href) == true) {
var isbn = RegExp.$2;
var x99 = window.open('http://searchsite/search/searchresults.aspx?ctx=1.1033.0.0.6&type=Keyword&term=' + atatn, 'Library', 'scrollbars=1,resizable=1,top=0,left=0,location=1,width=800,height=600');
x99.focus();
}
Any ideas? Thanks for your help.
Many mistakes in the code.
You don't need content script here, all operations could be executed
within background page content
It it hard to make background page
code works within content script, this is definitely not a your case.
So using the same background.js as both background and content script
does not work in your case at least
Manifest does not declare browser
action.
And so on
I strongly suggest to start with Google extension documentation. You will save a lot of your time.
How I think files might look like
manifest.json
{
"background": {"scripts": ["background.js"]},
"name": "Denver Public Library Lookup",
"description": "Does Stuff",
"homepage_url": "http://www.artifacting.com",
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png" },
"browser_action": {
"default_icon": {
"19": "images/icon-19.png",
"38": "images/icon-38.png"
},
"default_title": "Do Staff" // optional; shown in tooltip
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"version": "1.0",
"manifest_version": 2
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
// You need more sothisticated regexp here which checks for amazon and google domains
var re = /([\/-]|at[at]n=)/i;
if (re.test(tab.url)) {
var isbn = RegExp.$2;
var url = "http://searchsite/search/searchresults.aspx?ctx=1.1033.0.0.6&type=Keyword&term=" + isbn;
chrome.windows.create({
url : url,
left: 0,
top: 0,
width: 800,
height: 600,
focused: true,
type: "popup"
});
}
});
bookmarlet.js is not needed