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
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.
So basically I need to do a couple of things
chrome.webrequests.onBeforeRequest.addlisteners
chrome.browser.addbadgetext
chrome.tabs.query
in a content script. The reason why I want this in content script is because I want the above to trigger without clicking the extension icon on the active page. How can I do that?
Below is my manifest.json
{
"manifest_version": 2,
"name": "My Ext",
"description": "My Ext desc",
"icons": {
"16":"logo-sm.png",
"48":"logo-sm.png",
"128":"logo-sm.png"
},
"version": "1.0",
"homepage_url": "abc.com",
"browser_action": {
"default_icon": "favicon.png",
"default_title": "My ext"
},
"background": {
"scripts": ["scripts/background.js"],
"persistent": true
},
"web_accessible_resources": ["oxy-logo-sm.png"],
"content_scripts": [{
"matches": ["<all_urls>"],
"all_frames": true,
"js":["scripts/content.js"],
"run_at": "document_start"
}],
"permissions": ["activeTab", "webRequest", "tabs", "<all_urls>"]
}
I am trying to develop my first extension in google chrome and I am following this tutorial: Tutorial
Everything is working great except the 2 lines of code in content.js
The problem is that the contents of "content.js" are not correct and I am getting "undefined" in chrome console for line 2.
Can someone please help me out and let me know why this happens?
I share the contents of content.js with you in order to help me out.
content.js contents:
var firstHref = $("a[href^='http']").eq(0).attr("href");
console.log(firstHref);
manifest/json file contents:
{
"manifest_version": 2,
"name": "My Cool Extension",
"version": "0.2",
"icons": { "128": "icon_128.png" },
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["jquery-2.1.3.min.js", "content.js"]
}
],
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"tabs"
]
}
I guess, your content script is loading before the whole document is loaded.That's why it returned undefined.
To make sure your content scripts are inject at properly, you should define "run_at" in file manifest.json
Example:
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"],
"run_at": "document_end",
"all_frames": true
}
],
please check Content Scripts parameters for more details.
In my content script I do
chrome.windows.create({url: "local.html", type: "popup"});
however, no window ever shows up.
Do I need to change my manifest file first? Why doesn't this function create a new window ever?
I have tabs enabled like so
{
"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"
},
"permissions": [
"<all_urls>","tabs", "webNavigation"
],
"content_scripts": [
{
"run_at": "document_end",
"matches": [
"<all_urls>"
],
"js": [
"src/lib/jquery.min.js", "src/inject/inject.js"
],
"css": [
"src/inject/inject.css"
]
}
]
}
You are trying to call this from the content script.
Quoting the docs:
However, content scripts have some limitations. They cannot:
Use chrome.* APIs (except for parts of chrome.extension)
If you need to initiate some action that uses Chrome API from the content script, you have to message your background script to do this. See Architecture overview and Messaging.
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
});