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.
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 working on a chrome extension that requires jQuery (not too familiar with jQuery). I have some messages getting passed around, but at some point it stops working and I'm not sure why. Currently on manifest v2 but working on moving to manifest v3.
Here's the folder structure:
chrome-extension
configs
dist
node_modules
src
css
js
internal
functions.js
functions.js
jquery.js
product.js
manifest.json
popup.html
When I reload the page, the extension runs this in product.js which passes a message
// product.js
$(function(){
chrome.runtime.sendMessage({method: "getStatus"}, function(response) {
console.log(response) //This response never happens
if(response.status != 'true'){
//do some stuff
}
The message is received in functions.js
//functions.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
console.log(request) //logs {method: 'getStatus'}
console.log(sender) //logs info about the tab
console.log(window.localStorage) //logs local storage
if (request.method == "getStatus") {
sendResponse({status: localStorage['opt-disable']}); //this sends nothing?
} else {
sendResponse({msg: "hello"}); //this is just a test
}
});
Back in product.js, there is no response. It seems like sendResponse in functions.js is sending a truthy/falsy value, and 'opt-disable' doesn't exist in localStorage so I would expect it to be falsy, but in the console log in product.js, nothing even shows up as a response. Why isn't the response sending?
Here is manifest.json
{
"manifest_version": 2,
"name": "Chrome Assistant DEV",
"short_name": "Chrome Assistant DEV",
"description": "Dev Version",
"version": "2.12.1",
"permissions": [
"activeTab",
"cookies",
"identity",
"storage",
"tabs",
"webRequest",
"webRequestBlocking",
"http://*/*",
"https://*/*",
"*://*/*"
],
"browser_action": {
"default_icon": "img/icon-128.png",
"default_popup": "popup.html"
},
"icons": {
"16": "img/icon-16.png",
"32": "img/icon-32.png",
"64": "img/icon-64.png",
"128": "img/icon-128.png"
},
"web_accessible_resources": [
"js/jquery.js",
"css/pagecss.css",
"js/internal/gmail_libraries.js",
"js/internal/gmail_functions.js",
"pages/oauth2_success.html"
],
"background": {
"scripts": [
"config.js",
"js/jquery.js",
"js/developer.js",
"js/helperFn.js",
"js/functions.js",
"js/internal/functions.js",
"js/internal/results.js"
]
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["config.js", "js/jquery.js", "js/product.js"]
}
],
"content_security_policy": "script-src 'self'; object-src 'self'",
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Alt+Shift+O"
}
},
},
"externally_connectable": {
"ids": ["*"],
"matches": [
"https://mail.google.com/*"
]
}
}
I'm importing many of the scripts in popup.html as well, here's the head:
<!DOCTYPE html>
<html style="height: auto;">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/typeahead.js"></script>
<script type="text/javascript" src="js/helperFn.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/internal/functions.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
<link rel="stylesheet" type="text/css" href="css/rebrand_2018.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
I am trying to create a chrome extension to turn a page red
This is my manifest file:
{
"name": "Page Redder",
"description": "Make the current page red",
"version": "2.0",
"icons":{"128":"icon_128.png"},
"permissions": [
"activeTab"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Make this page red",
"default_popup":"popup.html"
},
"manifest_version": 2
}
And here is my background.js file:
function mainFunction(){
document.body.style.backgroundColor="red";
}
Here is my popup.js file:
document.getElementById("btnDownloadListings").addEventListener("click", function() {
document.body.style.backgroundColor="red";
chrome.runtime.getBackgroundPage(function(backgroundPage) {
backgroundPage.mainFunction();
});
}, false);
When I click the button the popup.html or the popup tab turns red but the main page does not.
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
}
}
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.