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?
Related
I am making a chrome extension. Here is the code:
Manifest.json:
{
"name": "My name!",
"version": "2.0",
"description": "Blocks ads",
"permissions": ["webRequest", "webRequestBlocking", "<all_urls>"],
"browser_action": {
"default_icon": "shield.ico",
"default_popup": "popup.html",
"default_title": "Ad be gone"
},
"background": {
"scripts": ["background.js"]
},
"manifest_version": 2
}
background.js:
chrome.webRequest.onBeforeRequest.addListener(
function(details) { return {cancel: true}; },
{ urls: ["*://*.doubleclick.net/*", "*://*.ads.google.com/*",] },
["blocking"]
);
How would I make a button in popup.html that turns on and off the background.js and alerts the user that it is doing so? I basically want to make a button that turns on and off the ad blocker.
Im trying to communicate background with content script, but my way doesnt work. And I want to know why it doesnt work and how to solve this problem(other solutions dont work. idk why).
Manifest.json:
{
"manifest_version": 2,
"name": "X",
"version": "2.0",
"browser_action": {
"default_title": "title"
},
"permissions": [
"activeTab",
"tabs"
],
"content_scripts": [
{
"matches": ["https://*/*"],
"js": ["content_scripts/jquery.min.js", "content_scripts/script.js"],
"run_at": "document_idle"
}
],
"background": {
"scripts": ["background/background.js"]
},
"icons": {
"16": "icon.png",
"32": "icon.png",
"48": "icon.png",
"64": "icon.png",
"128": "icon.png"
}
}
Background.js:
chrome.tabs.query({active: true}, function (tabs) {
tabs.forEach((cur, i)=>{
chrome.tabs.sendMessage(tabs[i].id, {"delBody": true})
})
})
ContentScript:
chrome.runtime.onMessage.addListener(function(obj, sender) {
if(obj.delBody)
document.body.remove()
})
Thanks you very much wOxxOm. Problem was in
The background script runs when your extension is loaded on browser startup/update, when your content script haven't yet been injected
So I solve it like this:
content:
chrome.runtime.sendMessage({"getInfo": true})
chrome.runtime.onMessage.addListener(function(obj, sender) {
if(obj.delBody)
document.body.remove()
})
background:
chrome.runtime.onMessage.addListener(function(obj, sender) {
if(request.getInfo) {
chrome.tabs.query({active: true}, function (tabs) {
tabs.forEach((cur, i)=>{
chrome.tabs.sendMessage(tabs[i].id, {"delBody": true})
})
})
}
})
I'm using the example here as a starting point for accessing some DOM elements on the user's current tab. In popup.html, I have the following:
<script type="text/javascript" src="popup.js"></script>
And the first lines of popup.js are:
chrome.browserAction.onClicked.addListener(function(tab) {
// No tabs or host permissions needed!
console.log("test");
console.log('Turning ' + tab.url + ' red!');
chrome.tabs.executeScript({
code: 'document.body.style.backgroundColor="red"'
});
});
Manifest.json has the following permissions:
{
"manifest_version": 2,
"name": "",
"version": "1.0",
"description": "",
"icons": { "16": "icon16.jpg",
"48": "icon48.jpg",
"128": "icon128.jpg" },
"minimum_chrome_version": "46",
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery.min.js", "getDescription.js"],
"run_at": "document_start"
}],
"options_page": "options.html",
"permissions": ["<all_urls>", "tabs","storage", "activeTab"]
}
Nothing is appearing in console, as if function isn't firing at all.
As it mention here onClicked fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.
If you want to have the popup and then to execute a script when the icon is clicked use below approach.
{
"name": "My Extension",
"version": "0.1",
"manifest_version" : 2,
"description": "la lala laa",
"background" : {
"scripts" : ["background.js"]
},
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
},
"permissions": ["activeTab"]
}
Inside the background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "popup.js"});
});
Or it should work fine if you have below in your popup.html
<script src="popup.js"></script>
Inside your popup.js
window.onload = function() {
console.log("do whatever you want here !!!")
}
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
I want to use a plugin on the content page, this is my code :
manifest
{
"manifest_version": 2,
"name": "Test",
"description": "foo",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"options_ui": {
"page": "options.html",
"chrome_style": true
},
"permissions": [
"activeTab",
"storage",
"https://google.com/*"
],
"content_scripts": [{
"matches": ["http://google.com/*"],
"js": ["jquery-3.1.0.min.js", "simply-toast.min.js"],
"css": ["simply-toast.min.css"],
"run_at": "document_end"
}]
}
content.js
...
$.simplyToast('success', 'This is a success message!'); // Line 72
jQuery works fine but I get this error when trying simpleToast content.js:72 Uncaught TypeError: $.simplyToast is not a function .Not sure what I'm missing here.
Wrong Syntax I guess!
$.simplyToast('This is a success message', 'success'); // Line 72