I've spent hours and hours trying to figure out what's wrong with my chrome extension. I know that my function.js code is good because it works with an html page that I link it to, but perhaps it isn't right for chrome extensions?
All help is appreciated
manifest.json
{
"manifest_version": 2,
"name": "Font Find",
"description": "This extension allows you to click on any text, and find out what font it is written in.",
"version": "1.0",
"background": {
"page": "popup.html",
"persistent": true
},
"permissions": [
"activeTab",
"http://*/*",
"https://*/*"
],
"browser_action": {
"default_title": "Find the Font",
"default_icon": "icon.png"//,
// "default_popup": "popup.html"
},
"background": { "scripts": ["jquery.min.js"] },
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"function.js"
]
}
]
}
popup.html file (note it isn't set as the popup)
<!DOCTYPE HTML>
<html>
<head>
<!-- <link rel="stylesheet" href="popup.css"/> -->
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
<script src="function.js"></script>
</head>
</html>
function.js file
"use strict";
$("body").append('Test');
document.body.ondblclick = function(event){
//event.stopPropagation();
var target = event.target || event.srcElement;
alert( "What you clicked on:" + $(target).text() + " It's font-family is: " + $(target).attr("font-family") );
}
function.js file
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.executeScript({
file: "function.js"
});
});
First, edit the manifest.json file. Add this code:
"content_scripts": [{
"matches": [
"http://*/*",
"https://*/*"
], "js": [
"jquery.min.js",
"function.js"
], "run_at": "document_start"
}]
And now, use this code in function.js file.
document.addEventListener("DOMContentLoaded", function() {
document.body.addEventListener("dblclick", function(e) {
var target = e.target;
alert("What you clicked on: " + $(target).text() + " It's font-family is: " + $(target).attr("font-family"));
}, true);
});
I tested this code and it works. I hope it helps.
Related
What am I missing that popup is not being shown?
In an extension folder I have four files. I load that folder as extension. I can see the icon, but when I click on it popup is not shown. Why?
content_script.js: empty (just added so that I can load the extension)
icon.png: It is shown, when I load extension.
manifest.json:
{
"name": "Popup poc",
"version": "1.4",
"description": "Simple popup example",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content_script.js"]
}
],
"page_action": {
"default_name": "Display Map",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
popup.html:
<!doctype html>
<html>
<head>
<title>Popup</title>
</head>
<body>
This is body
</body>
</html>
Replace "page_action" with "browser_action" in your manifest.json. You should be able to see the popup on all pages this way.
It's possible duplicate of: Chrome extension popup not showing anymore
But it seems like I don't have enough reputation points to flag it for that.
Popups only for certain hosts URL patterns
(Edit)
If you want your popup available only on certain sites (for example, only on Google), then you need to specify declarativeContent permissions in your manifest, and also a little setup in a background script.
So, your manifest.json would look something like this:
{
"name": "Popup poc",
"version": "1.4",
"description": "Simple popup example",
"permissions": ["declarativeContent"],
"content_scripts": [
{
"matches": ["https://www.google.com/*"],
"js": ["content_script.js"]
}
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_name": "Display Map",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
Your background.js would look like this:
chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'www.google.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
This code is largely from the Getting Started Tutorial.
I am making a chrome extension where I want to take user input in the popup and fill the textbox of a page. I have the following code but the data from the popup does not reach the content script.
Manifest.json
{
"manifest_version": 2,
"name": "Copy from popup to current tab",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"storage"
],
"content_scripts": [{
"js": ["content.js"],
"matches": ["*://*/*"],
"run_at": "document_end"
}]
}
Popup.html
<!DOCTYPE html>
<html>
<head>
<title>Copy from popup to webpage</title>
<script src="popup.js"></script>
</head>
<body>
<input type= "text" id = "inp" height='50' width = '200'></input>
<button id="send">Click Me</button>
</body>
</html>
Popup.js
window.onload = function(){
document.getElementById('send').onclick=LogIn;
}
function LogIn(){
var data = document.getElementById('inp').value;
chrome.storage.local.set({
data : data
},function(){
chrome.tabs.executeScript({
file: "content.js"
});
}
);
}
Content.js
chrome.storage.local.get('data',function(items){
var gotdata = items.data;
chrome.storage.local.remove('data');
});
Am trying to override the history page in chrome using an extension. I have set the override page option in manifest.json file and created a new history.html file. The extension is running perfect and the history page showing blank now. I need to list all the history in my new override page history.html page. Is there any way to do this?
Here is my manifest.json file.
{
"name": "Recently visited urls",
"version": "1.0",
"description": "Recently visited urls",
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["popup.js"]
}],
"background": {
"scripts": ["jquery.js","background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Recently visited urls",
"default_popup": "popup.html",
"default_icon": "clock.png"
},
"permissions": [
"history",
"downloads"
],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"chrome_url_overrides": {
"history": "history.html"
},
"manifest_version": 2
}
Thanks in advance!
If you mean why your customized history page is blank, have you declared history permission in your manifest.json?
Update:
Since chrome.history api can only be accessed through background scripts, we need to do message passing from background scripts to your override history page. However, we can't inject content scripts to chrome://history and after trying many methods, I think using localStorage is a workaround to solve this problem.
manifest.json
{
"name": "Search History",
"version": "1.0",
"manifest_version": 2,
"description": "Your description",
"chrome_url_overrides": {
"history": "history.html"
},
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"permissions": [
"history"
]
}
history.html (here I just concat all localStorage in a string, you can customize your view here)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="historyText"></p>
<script src="content.js"></script>
</body>
</html>
background.js (you can configure history items number by setting maxResults to other number)
chrome.browserAction.onClicked.addListener(function () {
chrome.history.search({ text: '', maxResults: 10 }, function (data) {
data.forEach(function(page) {
localStorage.setItem("Id: " + page.id + ", title: " + page.title, page.url);
});
});
});
content.js
var historyText = "";
for(var key in localStorage) {
historyText += key + ": " + localStorage.getItem(key) + ", ";
}
document.getElementById("historyText").innerText = historyText;
I've tried everything but still not showing the popup at all when I click the browser action button of my extension. Clicking the icon doesn't show the popup.html located at the directory src/cbrowser_action/popup.html, the console doesn't give me any helpful reasons why it failed. I read a lot of the other answers but it all seem to point to manifest which I can't see anything missing.
here's my manifest
{
"name": "Tool",
"version": "0.0.1",
"manifest_version": 2,
"description": "",
"homepage_url": "",
"icons": {
"16": "icons/on.png",
"48": "icons/on.png",
"128": "icons/on.png"
},
"default_locale": "en",
"background": {
"page": "src/bg/background.html",
"persistent": true
},
"browser_action": {
"default_icon": "icons/on.png",
"default_title": "browser action demo",
"default_popup" :"popup.html"
},
"permissions": [
"<all_urls>", "management", "tabs", "webRequest","webNavigation", "webRequestBlocking", "storage"
],
"content_scripts": [
{
"run_at": "document_end",
"matches": [
"<all_urls>"
],
"js": [
"src/lib/jquery.min.js","src/inject/content.js"
],
"css": [
"src/inject/content.css"
]
}
]
}
popup.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="popup.js"></script>
<title></title>
</head>
<body>
asdfsup
</body>
</html>
popup.js
console.log('loaded');
The output of console.log is not going to be on the page console. The console scope for the popup is the popup itself by right-clicking the browser action icon and selecting "Inspect popup".
The logging output should be visible there.
I'm very much new to the whole chrome extensions world.
I've read through the tutorial "hello world" pages and tried to gain an understanding of content_scripts and background.html - but I may have overdosed and can't seem to find an answer to something I'm sure is a simple task.
In a tab a site contains the following Hidden HTML:
<div class="XYZ">
<input id="form_ID" type="hidden" value="REF_CODE#Product_CODE#Product Name#">
</div>
What I'm trying to figure out is how I can Display the
RefCode
ProductCode
Product Name
In a popup.html
I'm not looking at editing the html or manipulating it in any way.. it is strictly just displaying the hidden HTML - in an easy to read Popup.
Hope that makes sense..
Thanks in Advance.
UPDATE:
Popup.html
<html>
<head>
<script>
function readIds() {
console.log('Send request to content script');
document.getElementById("response").innerText = "Requesting...";
chrome.tabs.getSelected(null,function(tab){
chrome.tabs.sendRequest(tab.id, {cmd: "readIds"}, function(response){
console.log('Response from page is:' + response);
document.getElementById("response").innerText = JSON.stringify(response);
});
});
}
</script>
</head>
<body style="width:400px;">
Click to read ids
<pre id="response"></pre>
</body>
</html>
Content_script.js
// add a listener to get messages from background, popup
chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
switch (request.cmd) {
case "readIds":
console.log("readIds", request);
document.getElementById("productID");
sendResponse({refCode:1, productCode: 2, productName: 3});
break;
}
});
manifest.json
{
// Required
"name": "WP Debug",
"version": "0.0.1",
// Recommended
"description": "A plain text description",
"icons": { "48": "icon.png" },
//"default_locale": "en",
// Pick one (or none)
"browser_action": {
"default_icon": "icon.png", // optional
"default_title": "WP Debug", // optional; shown in tooltip
"popup": "popup.html"
},
"permissions": [ "http://*/", "https://*/", "tabs" ],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content_script.js" ],
"run_at": "document_idle"
}
]
}
Your popup needs to send a message to your content script which then gathers up the hidden field info and sends the response back to the popup.
Here is an example:
popup.html
<html>
<head>
<script>
function readIds() {
console.log('Send request to content script');
document.getElementById("response").innerText = "Requesting...";
chrome.tabs.getSelected(null,function(tab){
chrome.tabs.sendRequest(tab.id, {cmd: "readIds"}, function(response){
console.log('Response from page is:' + response);
document.getElementById("response").innerText = JSON.stringify(response);
});
});
}
</script>
</head>
<body style="width:400px;">
Click to read ids
<pre id="response"></pre>
</body>
</html>
content_script.js
// add a listener to get messages from background, popup
chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
switch (request.cmd) {
case "readIds":
console.log("readIds", request);
//TODO: Get real values to send from page
//e.g. document.getElementById("someid") etc
sendResponse({refCode:1, productCode: 2, productName: 3});
break;
}
});
mainfest.json
{
// Required
"name": "Foo Extension",
"version": "0.0.1",
// Recommended
"description": "A plain text description",
"icons": { "48": "foo.png" },
//"default_locale": "en",
// Pick one (or none)
"browser_action": {
"default_icon": "Foo.png", // optional
"default_title": "Foo Extension", // optional; shown in tooltip
"popup": "popup.html"
},
"permissions": [ "http://*/", "https://*/", "tabs" ],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content_script.js" ],
"run_at": "document_idle"
}
]
}
See documentation: http://code.google.com/chrome/extensions/messaging.html