Chrome extension does not work on the first installation - javascript

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

How do I make a button that executes the background.js in a chrome extension?

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.

Communication of background with content script

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})
})
})
}
})

Accessing DOM in Chrome Extension

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 !!!")
}

document.getElementsBy is undefined

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

Chrome extension content script

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

Categories