Any idea why the following chrome extension responds very slow when checkboxes are clicked?
I tried to use page_action, but that prevented the chrome.browserAction.setBadgeBackgroundColor functionality.
I want to change the extension's icon from the background.js script, but then options.html doesn't work properly.
manifest.json:
{
"name": "name",
"description": "desc",
"manifest_version" : 2,
"version" : "0.1.0",
"icons": {
},
"web_accessible_resources": [
],
"options_page": "options.html",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "def title",
"default_popup": "options.html"
},
"permissions": [
"background",
"notifications",
"http://*/",
"https://*/"
]
}
options.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
</head>
<body>
<div>
<div class="p-2">
<form>
<div>
<input type="text" name="input_text" id="input_text" />
<label for="input_text">Text input</label>
</div>
<div>
<input type="checkbox" name="cb1" id="cb1" />
<label for="cb1">Checkbox 1</label>
</div>
<div>
<input type="checkbox" name="cb2" id="cb2" />
<label for="cb2">Checkbox 2</label>
</div>
<div>
<input type="submit" name="submit" value="Submit"/>
</div>
</form>
</div>
</div>
</body>
</html>
background.js:
function changeIconBackground() {
chrome.browserAction.setBadgeBackgroundColor({color: [255, 255, 0, 200]});
}
changeIconBackground();
Related
hi there i just want to open my popup.html page that work as a default_popup not open new popup in new window/tab with the help of background.js file
this is my mainfest.json file
{
"manifest_version": 3,
"name": "Omm",
"version": "0.1.0",
"description": "My Chrome Extension",
"icons": {
"16": "icons/icon_16.png",
"32": "icons/icon_32.png",
"48": "icons/icon_48.png",
"128": "icons/icon_128.png"
},
"background": {
"service_worker": "background.js"
},
"action": {
"default_title": "Omm"
},
"permissions": [
"storage",
"activeTab"
],
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"run_at": "document_idle",
"js": [
"contentScript.js"
]
}
]
}
background.js file ...
chrome.action.onClicked.addListener(function() {
chrome.windows.create({'url': 'popup.html', height: 800, width: 900, 'type': 'popup'}, function(window) {
});
});
popup.html file ..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Chrome Extension</title>
<link rel="stylesheet" href="popup.css" />
</head>
<body>
<div style="padding: 20px 20px 20px 20px;">
<h3>Hello</h3>
<p>Please enter your name : </p>
<input id="name_textbox" type="file" value="" />
<button id="btn" > submit</button>
click here
</div>
<script src="popup.js"></script>
<!--
This HTML file opens when you click on icon from the toolbar.
To begin the development, run `npm run watch`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>
but they open popup.html file in new window i want popup.html file work as a default_popup
My Chrome extenstion consists of the following files:
manifest.json
background.js
content.js
background.js sends a message to content.js when the browser action is clicked. That's when I want to show the modal, which is going to show data from the messeage.
Where do I store the HTML (the hidden modal) and how do I access it?
UPDATE
I create an iframe in content.js like this:
var iframe = document.body.appendChild(document.createElement('iframe'));
iframe.src = chrome.extension.getURL('modal.html');
modal.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="jquery-3.3.1.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
manifest.json
{
"manifest_version": 2,
"name": "Anslutningsstatus Webbtidbokning",
"description": "Visar vilka webbtidbokningsflöden i 1177 Vårdguidens e-tjänster som en vårdenhet har stöd för baserat på vilka tjänstekontrakt den är ansluten till.",
"version": "0.1",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"background": {
"scripts": ["browser-polyfill.min.js", "background.js", "axios.min.js"]
},
"permissions": [
"tabs",
"<all_urls>"
],
"browser_action": {
"default_icon": "icon16.png"
},
"web_accessible_resources": ["content.js", "styles.css", "modal.html"]
}
What happens is that a 300 px wide, totally blank iframe is injected into the page. What am I doing wrong?
I am making my first chrome extension and need to pull data from one table and add it to the fields of a popup.html page.
I need to do this with out jquery.
How do I access element.innerHTML by ID from current tab and add them to a popup page.
I setup a test page with tables were the TD tags have a unique ID’s.
<tr>
<td><div id="field1a">Data Block 1-A</div></td>
<td><div id="field2a">Data Block 2-A</div></td>
<td><div id="field3a">Data Block 3-A</div></td>
<td><div id="field4a">Data Block 4-A</div></td>
</tr>
I need to take the text from ID=” field1a” one the main page and add it to a form on the popup.html page.
Here is my code.
manifest.json
{
"manifest_version": 2,
"name": "Harvesting Data 8.",
"version": "1.8",
"description": "Pull text from select fileds.",
"icons": {
"128": "img/icon128.png",
"48": "img/icon48.png",
"16": "img/icon16.png"
},
"browser_action": {
"default_icon": "img/icon16.png",
"default_popup": "popup.html"
},
"options_page": "options.html",
"permissions":[
"activeTab",
"storage"
],
"content_scripts": [{
"matches": [
"https://www.steampunkferret.com/*"
],
"js": ["scripts/background.js"]
}]
}
popup.html
<!DOCTYPE html>
</html lang="en">
<head>
<meta charset="utf-8" />
<title>Harvester</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="scripts/popup.js"></script>
</head>
<body>
<button type="button" class="harvestButton" id="harvestButton" wdith="100%">Harvest Data</button>
<br />
<br /><form class="" action="https://www.steampunkferret.com/" target="_blank" method="post">
User ID:<input type="text" id="userID"><br /><br>
Data Block 1-A: <input type="text" id="field1Text"><br /><hr>
Data Block 2-B: <input type="text" id="field2Text"><br /><hr>
Data Block 3-C: <input type="text" id="field3Text"><br /><hr>
Data Block 4-D: <input type="text" id="field4Text"><br /><hr>
Data Block 2-D: <input type="text" id="field5Text"><br /><hr>
Data Block 4-A: <input type="text" id="field6Text"><br /><hr>
<input type="submit" id="submitButton" value="Submit Data">
</form>
</body>
</html>
background.js
chrome.runtime.onMessage.addListener(gotMessage);
function gotMessage(message, sender, sendResponse){
alert("Background Script Called.");
}
popup.js
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('harvestButton').addEventListener('click', harvesting);
});
function harvesting() {
getUserID();
pulledDataFromMainPage();
}
//setUserID() set the User UserID.
function getUserID() {
//alert('popup_js.myFunction() called');
chrome.storage.sync.get(['sfUserID'], function(chromInfo) {
document.getElementById('userID').value = chromInfo.sfUserID;
})
}
//This part will need to access the DOM of the page www.ferretforce.com/salesforce and pull text valus then add them to the popup.html form.
function pulledDataFromMainPage(){
alert('popup_js.pulledDataFromMainPage() called');
var field1 = document.getElementById('field1a').innerHTML;
var field2 = document.getElementById('field2b').innerHTML
var field3 = document.getElementById('field3c').innerHTML;
var field4 = document.getElementById('field4d').innerHTML;
var field5 = document.getElementById('field2d').innerHTML;
var field6 = document.getElementById('field4a').innerHTML;
document.getElementById('field1Text').value = field1;
document.getElementById('field2Text').value = field2;
document.getElementById('field3Text').value = field3;
document.getElementById('field4Text').value = field4;
document.getElementById('field5Text').value = field5;
document.getElementById('field6Text').value = field6;
}
I know I am asking a lot but I just started make chrome extension and I am now to this so if you can help I would apprciate it. I have been looking on line and see some examples that use Jquery or something like this. I would like to do this in HTM/JAVASCRIPT/CSS that i can write.
It might be better to call content script somehow else (not background.js) since there are also actual background scripts... You need to move your page dom access code into the message handler in your content script - only from there you can access the page dom. Then you will need to reply to popup's initial request with the data by calling your sendResponse. And the initial call can be made from popup with chrome.tabs.sendMessage
and chrome.tabs.query({ active: true, currentWindow: true }, (tabs)=>{...}) to find an active one.
PS: and since you are populating input fields it is probably better to use textContent instead of innerHtml.
I am trying to create a google search bar in a chrome extension that will open the search in a new browser tab. My manifest.json looks like this:
{
"name": "Search",
"version": "1.0",
"manifest_version": 2,
"description": "Search",
"browser_action": {
"default_icon": "search.png",
"default_popup": "popup.html"
}
}
My HTML looks like this:
<div id="search">
<form method="get" action="http://www.google.com">
<div style="border:0px solid black;padding:2px;width:20em;">
<table border="0" cellpadding="0">
<tr><td>
<input type="text" name="q" size="25"
maxlength="255" value=""<textarea placeholder="Search Google"></textarea>
<input type="submit" value="Search" /></td></tr>
</table>
</div>
This html page works fine in a normal browswer but not as a chrome extension. I think that I need to give permission to access my tabs but I am new to making chrome extensions so I am having a little bit of trouble with my rigid manifest.json markup.
Add a target="_blank" attribute to your form, like so:
<form method="get" action="http://www.google.com" target="_blank">
(MDN Reference)
manifest.json
{
"name": "Summer",
"version": "1.0",
"manifest_version": 2,
"description": "This is an addition extension",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<!-- JavaScript and HTML must be in separate files for security. -->
<script src="popup.js"></script>
</head>
<body>
<form name="form">
<div id="sayi1">Sayı 1 : <input type = "text" name="deger1"></div>
<div id="sayi2">Sayı 2 : <input type = "text" name="deger2"></div>
<div id="sonuc">Sonuç : <input type = "text" name="cevap"></div>
<div id="button"><input type="button" value="Hesapla" onclick="hesaplama()" /></div>
</form>
</body>
</html>
popup.js
function hesaplama()
{
var sayi1 = window.document.form.deger1.value;
var sayi2 = window.document.form.deger2.value;
var toplam = parseFloat(sayi1) + parseFloat(sayi2) ;
window.document.form.cevap.value = toplam;
}
When i load this extension, i can see normally. But when i filled the deger1 and deger2 textbox and clicked the button, function is not working, in the sonuc textbox (result textbox) is null.
How can i fix it? I am new at creating chrome extensions. Thanks for your help.
You've got manifest_version : 2 in your manifest, so please go read about the changes it introduces....
http://code.google.com/chrome/extensions/manifestVersion.html
You got in the console Refused to execute inline event handler because of Content-Security-Policy, because of the onclick event handler in your html (<input type="button" value="Hesapla" onclick="hesaplama()" />). With manifest version 2 this isnt allowed, you need to attach the event listner from your js code and not in the html.
Here's a working version of your code....
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<!-- JavaScript and HTML must be in separate files for security. -->
<script src="popup.js"></script>
</head>
<body>
<form name="form">
<div id="sayi1">Sayı 1 : <input type = "text" name="deger1"></div>
<div id="sayi2">Sayı 2 : <input type = "text" name="deger2"></div>
<div id="sonuc">Sonuç : <input type = "text" name="cevap"></div>
<div id="button"><input type="button" value="Hesapla" /></div>
</form>
</body>
</html>
popup.js
function hesaplama()
{
var sayı1 = window.document.form.deger1.value;
var sayı2 = window.document.form.deger2.value;
var toplam = (parseFloat(sayı1) + parseFloat(sayı2)) ;
window.document.form.cevap.value = toplam;
}
window.onload = function(){
document.querySelector('input[value="Hesapla"]').onclick=hesaplama;
}