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
});
Related
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 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 trying to run window.location.href= $newURL after opening a new tab by using executeScript.
Error:
Unchecked runtime.lastError: Cannot access contents of url "https://www.google.com/_/chrome/newtab?ie=UTF-8". Extension manifest must request permission to access this host.
What permission still needed to be added to this manifest.json
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2,
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": ["activeTab", "tabs", "declarativeContent", "*://*/*", "storage"],
"page_action": {
"default_popup": "popup.html"
}
}
and the running code for the new tab in background.js
chrome.runtime.onInstalled.addListener(function() {
chrome.tabs.onCreated.addListener(function( tab ){
tab.url = "https://mahmoudzakaria90.github.io/HelloZeka/public/"
chrome.tabs.executeScript({
file: './inject.js'
})
})
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher()
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
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.