I'm currently creating a chrome extension for dyslexia and am trying to link a button press in the popup for the extension to changing the font size of the page as an initial step, but I'm having trouble making it work. The issue is that nothing happens upon pressing the button in the pop up.
Here is the html for the pop up:
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
}
</style>
</head>
<body>
<button id="changeFont"></button>
<script src="popup.js"></script>
</body>
</html>
Here is the source file for the popup html:
let changeFont = document.getElementById('changeFont');
changeFont.onclick = function(element) {
chrome.tabs.executeScript({
code:
'var elements = document.getElementsByTagName('*');'+
'for (var i = 0; i < elements.length; i++) {' +
'var element = elements[i];' +
'element.style.fontSize = "50px";'+
'}'
});
};
Last, here is the manifest file:
{
"manifest_version": 2,
"name": "Dyslexipro",
"description": "dyslexia aid ",
"version": "1.0",
"permissions": ["activeTab",
"tabs","declarativeContent","storage"],
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"background": {
"scripts": ["content.js","popup.js"],
"persistent": true
}
}
Related
I would like to create chrome extension that I can open dialog when click on icon example. I tried to use content script but it only work when I open new tab
In your manifest.json file
{
"name": "Get a popup panel",
"action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 3,
"version": "0.1",
"description": "Open my own popup panel",
"permissions": ["storage", "activeTab", "scripting"],
"background": {
"service_worker": "background.js"
},
"host_permissions": ["<all_urls>"]
}
In you popup.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>My content here</body>
</html>
And in you background.js
chrome.runtime.onInstalled.addListener(function(){
// show here your welcome page
});
I'm trying to make my chrome extension open a new tab upon installation using the chrome.tabs API but I get the error 'Could not load background script 'background.js'. Could not load manifest.'
This is my manifest.json:
{
"short_name": "App",
"name": "App",
"version": "1.0.0",
"manifest_version": 2,
"icons": {
"16": "favicon.ico",
"48": "logo192.png",
"128": "logo512.png"
},
"permissions": ["tabs"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "App",
"default_popup": "index.html"
}
}
and my background.js:
chrome.runtime.onInstalled.addListener(function() {
alert('Thanks for installing!');
chrome.tabs.create({
url: 'https://google.com',
active: true
});
return false;
});
If anyone could help, that'd be great:)
I'm trying to develop a chrome extension for the first time and I'm having some hard time.
What I'm trying to achieve:
Every time a new URL reloaded, it checkes if it's one of the specific URLS I defined, let's say-
if reloaded URL = https://www.google.com/, change text to "This is google".
if reloaded URL = https://translate.google.com/, change text to "This is google transalte", and so on for 20 more urls.
When none of the URLS are reloaded, it will just stay in his last state.
Any help would be appriciated, thank you.
Popup.html
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<link rel="stylesheet" type="text/css" href="art.css"> <!--Include art.css File-->
<body>
<button id="click"></button>
<h1>H1</h1>
<h2>The Text I want to change</h2>
<div class="square"></div>
<h3>by X</h3>
</body>
</html>
background.js
chrome.runtime.onInstalled.addListener(function () {
chrome.tabs.insertCSS(tabId, {
file: "art.css"
});
});
manifest.json
{
"name": "X2",
"version": "1.0",
"description": "X3",
"permissions": [ "tabs", "activeTab", "declarativeContent", "storage" ],
"background": {
"scripts": [ "background.js" ], //Background Scripts
"persistent": false
},
"web_accessible_resources": [
"art.css"
],
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
remove background section from manifest.json and background.js file.
remove web_accessible_resources section from manifest.json
remove declarativeContent, tabs, storage from permissions in manifest.json
replace page_action with browser_action in manifest.json
create popup.js and load it at the end of popup.html:
<script src=popup.js></script>
</body>
popup.js will run each time the popup is shown, here's the entire file:
chrome.tabs.query({active: true, currentWindow: true}, tabs => {
const url = tabs[0].url;
const host = new URL(url).hostname;
const text =
host === 'www.google.com' && 'This is google' ||
host === 'www.google.com' && 'This is google translate';
if (text) {
document.querySelector('h2').textContent = text;
}
});
The popup is a separate page so to debug it you should use its own devtools, which can be opened by right-clicking inside the popup, then clicking "inspect" in the context menu.
I have a chrome extension. Below is the manifest.
{
"name": "example",
"description": "sample",
"version": "1.0",
"permissions": [
"tabs",
"activeTab"
],
"options_ui": {
"page": "options.html",
"chrome_style": true
},
"background": {
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["https://www.google.co.in/*"],
"js": ["jquery-1.8.0.min.js", "content_script.js"]
}],
"browser_action": {
"default_title": "Title.",
"default_icon": "abc.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
popup.html
<html >
<head>
<title>ABC</title>
<script src="./popup.js"></script>
</head>
<body id="body" style="width:400px;max-height:80%;">
</body>
</html>
popup.js
document.addEventListener('DOMContentLoaded', function () {
<my code here>
});
When there is a single click on the icon the popup opens and everything works fine. When there is a double click the popup opens and closes in a flash.
I need to either disable the double click or make the double click work the same way single click works. Please suggest how this can be done.
I'm making a Chrome extension where I want to make all the images on a page spin using CSS keyframe animation, but I also want it to toggle on/off using JS. I've already figured out how to toggle on and off, but how should I execute the CSS from the JS? All I can think of is to just find all images, and add the .animation class, but it doesn't seem to work.
manifest.JSON
{
"manifest_version": 2,
"name": "SPINS",
"description": "SPINS",
"version": "1.0",
"browser_action": { },
"icons": { "16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png" },
"background": {
"scripts": ["background.js"]
},
"content_scripts":
[{
"matches": ["<all_urls>"],
"css": [ "spin.css"],
"js": [ "content.js"]
}],
"permissions": [
"activeTab"
]
}
background.JS
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.sendMessage(tab.id,{});
});
content.JS
var toggle = false;
chrome.runtime.onMessage.addListener(function() {
toggle = !toggle;
Array.prototype.forEach.call(document.querySelectorAll('img'), function(el) {
el.addClass("animation");
});
});
spin.CSS
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
.animation {
animation: 40s spin infinite linear;
}
Please replace
el.addClass("animation");
with
el.className = el.className + " animation";