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.
Related
I'm using several constants that are shared between my content.js and popup.js. How can I put them in one file and share them between both?
This does not work, global.js contains the constants
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"background": {
"persistent": false,
"scripts": ["global.js", "background.js"]
},
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["global.js", "content.js"],
"run_at": "document_end"
}],
"browser_action": {
"default_title": "Test Extension",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
global.js
var TEST = "test"
content.js/popup.js:
console.log(TEST)
in popup.js it prints TEST is not defined
You still need to add <script type="text/javascript" src="global.js"></script> to the HTML file. I thought it was included by default when you specify it in the manifest.json
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 am new to chrome extension development. The sample code I have is not running properly.
Requirement: Executing any jquery script(say $("body").hide();) on click of context menu button.
From the code, only jquery part is not working.
I have following files:
manifest.json
{
"manifest_version": 2,
"name": "jQuery DOM",
"version": "1",
"permissions": [
"contextMenus","tabs","activeTab"
],
"background": {
"scripts": ["jquery.min.js","sample.js"]
},
"description": "Manipulate the DOM when the page is done loading",
"browser_action": {
"name": "Manipulate DOM",
"icons": ["icon.png"],
"default_icon": "icon.png"
},
"content_scripts": [ {
"js": [ "jquery.min.js", "background.js" ],
"matches": [ "http://*/*", "https://*/*"],
"run_at": "document_end"
}]
}
background.js
$("body").append('Test');
I have icon.png in folder, and it gets loaded well.
jquery.min.js in same folder
sample.js
alert("Extension loaded");
function genericOnClick(info, tab) {
alert("Tab "+tab.id);
chrome.tabs.executeScript(tab.id, {
file: "jquery.min.js",
allFrames: true
},function(){
alert("callback");
$("body").hide();
});
alert("Completed");
$("body").hide();
}
var contexts = ["page"];
for (var i = 0; i < contexts.length; i++) {
var context = contexts[i];
var title = "Test Page menu item";
var id = chrome.contextMenus.create({"title": title, "contexts":[context],
"onclick": genericOnClick});
console.log("'" + context + "' item:" + id);
}
background.js works!
All the alerts work file, but .hide function from genericOnClick doesn't work.
Even if I move the code from sample.js to backgroud.js, it won't work.
Can you please tell me where did i go wrong ?
As I mentioned, a background script isn't allowed to interact with the DOM, (while a content script isn't allowed to use chrome.contextMenus). You need to combine both, and use message passing to tell the content script when to execute. Some other adjustments I made:
I renamed background.js and content.js so that their names now
reflect what they do, and made background.js into an event page.
I removed the browser action (the
extension would need browserAction.html or background.js would
need chrome.browserAction.onClicked.addListener to do anything
other than show the icon).
Programmatically injecting jquery means that always loading it as a
content script is unnecessary (although skipping programmatic injection allows you to omit the last three permissions).
background.js doesn't need jquery
anymore, so it isn't loaded there either.
The default executeScript
tab is the active tab, so we don't need it's id.
Here's the finished product:
manifest.json
{
"manifest_version": 2,
"name": "jQuery DOM",
"version": "1",
"permissions": [
"contextMenus", "activeTab", "tabs", "http://*/", "https://*/"
],
"background": {
"scripts": [ "background.js" ],
"persistent": false
},
"content_scripts": [ {
"js": [ "content.js" ],
"matches": [ "<all_urls>" ]
}],
"description": "Manipulate the DOM when the page is done loading"
}
background.js
function genericOnClick(info, tab) {
chrome.tabs.executeScript(null,
{"file": "jquery.min.js"},
function() {
chrome.tabs.sendMessage(tab.id,{"message":"hide"});
});
}
chrome.contextMenus.create({"title": "Test Page menu item",
"contexts":["page"],
"id":"contextId"});
chrome.contextMenus.onClicked.addListener(genericOnClick);
content.js
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
if (msg.message == 'hide') {
$("body").hide();
}
sendResponse();
});
Your content.js is probably much larger than it is here (+1 for the SSCCE). But if it is small, another option would be to omit the content script entirely, and replace the sendMessage with chrome.tabs.executeScript(null,{code:"$('body').hide();"});.
I have written a chrome extension
The manifest file is below
{
"name": "MWE",
"version": "2.0",
"permissions": [
"activeTab"
],
"content_scripts": [
{
"matches": ["https://*/*"],
"js": ["jquery.js", "content_script.js"]
} ],
"browser_action": {
"default_icon": "icon.png",
"default_title": "Make this widget bigger"
},
"manifest_version": 2
}
The jquery file that i am using is given below
$(".dijitAccordionTitle.dijitAccordionTitle-selected").parent().siblings().css("display","none")
$('#containerDiv').show().parentsUntil('body').andSelf().siblings().hide();
$("#dijit_layout_AccordionContainer_0").height($(document).height())
I want the jquery to execute after page is loaded successfully.The first line is not executing while it runs successfully in developer tools console.
What could be the issue?
Try wrapping the code in:
document.addEventListener('DOMContentLoaded', function () {
// Your code here
});
I'm trying to write a chrome extension and cannot seem to understand how to implement the following scenario:
user is on page X
user clicks on the extension's button
something happens (specifically, user is redirected to some url)
here's the manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_title": "my title"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["myscript.js"]
}
],
"permissions": [
"tabs", "https://*/*"
]
}
and here's myscript.js:
alert('entered myscript.js..');
function doMagic()
{
alert('extension button clicked!!');
}
chrome.extension.onClicked.addListener(doMagic);
i know im missing something really obvious, but cant seem to figure it out from the docs, other sites, etc.!!
Don't use a content_script, you really only need those if have to have access to the HTML of the tab.
Use a background_page for the onClicked listener and chrome.tabs.update to redirect the page.
function doMagic(tab) {
chrome.tabs.update(tab.id, { url: 'http://www.google.com' });
}
chrome.browserAction.onClicked.addListener(doMagic);