In the following google chrome extension file why do i cannot use a jquery script inside myscript.js file,Is jquery not loaded inside myscript.js file, what changes should be done in manifest file to use jquery inside myscript.js
Manifest.json
{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "This extension demonstrates a browser action with kittens.",
"version": "1.0",
"background": { "scripts": ["jquery-1.9.1.min.js","myscript.js"] },
"permissions": [
"tabs", "http://*/*"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
myscript.js
alert($("#extension-command-list").val()); //undefined
alert($("#extension-command-list").html()); //undefined
$(document).ready(function() {
alert("hello world"); //not seen
});
EDIT:
"background": { "scripts": ["jquery-1.9.1.min.js"] },
"content_scripts": [
{
"matches": ["https://*/*"],
"js": ["myscript.js"] or "js": ["jquery-1.9.1.min.js","myscript.js"]
}
],
The reason you are getting undefined is becaus you are not specifying a background page.
So.. the background page Chrome generates, looks just like
<html>
<head></head>
<body>
<script src="jquery-1.9.1.min.js"></script>
<script src="myscript.js"></script>
</body>
</html>
As you see there isn't any Element which can be selected, thats why your first too alert's return undefined.
Anyway, the alert("hello world") should be shown too, as the DOMContentLoaded or similar should be fired any way.
Could it be that you want to select Elements of an site you are visiting ?
If so, you should put myscript.js in an Content Script instead of a background page.
There you get access to the DOM of the site.
So the question is, what are you up to ?
If you actually want to select Elements in your background page, you have to specify one,
Looking at the background pages site shows you, its as easy as:
{
"name": "My extension",
...
"background": {
"page": "background.html"
},
...
}
Edit:
"default_popup" : "popup.html"
Refers to a Browser Actions Popup. A browser Action is used
[...] to put icons in the main Google Chrome toolbar, to the right of the address bar. In addition to its icon, a browser action can also have a tooltip, a badge, and a popup.
So
If a browser action has a popup, the popup appears when the user clicks the icon. The popup can contain any HTML contents that you like, and it's automatically sized to fit its contents.
To add a popup to your browser action, create an HTML file with the popup's contents. Specify the HTML file in the default_popup field of browser_action in the manifest, or call the setPopup method.
"background":"{...}"
A common need for extensions is to have a single long-running script to manage some task or state. Background pages to the rescue.
As the architecture overview explains, the background page is an HTML page that runs in the extension process. It exists for the lifetime of your extension, and only one instance of it at a time is active.
Also has a background script access to all parts of the Chrome Extension's Api. chrome.* if you have requested the permissions respectively
Now lets say, you want to for example extend the ContextMenu of chrome with some functionalities.
To do this, you first have create a contextMenuEntry in the background page.
And just like your background page has only one instance of it running at a time, and that for the lifetime of the extension, so should your contextMenuEntry only have one instance of it, which gets created when your extension runs and remains for the lifetime of your extension.
Now assume you want to display the currently selected text of the page you are visiting in one of you Menu Entries.
To do that, you need access to the chrome.contextMenus API Method but a contentscript is not allowed to use this.
To get this to work you need to pass a message with the selected text to the background page through e.g. chrome.extension.sendMessage
In the background page you can then update your existing contextmenuentry to display the selected text.
sry i couldn't think of a better example right now
Related
I want to ask is there ANY way or extension that can pre-highlight text within the iframe whenever a new window is opened containing iframe? I have tried many extension but none of them works.
I need to filter out content based on certain keywords and the content is within iframe. I can do it with CTRL+F but there are many keywords like 10-15 within each article to be found. So it makes my job very tough and time consuming. Few extensions that I have tried from chrome are multi highlighter, pearls, FF but none of them seems to work.
I also know the reason why these extension can't access content within the iframe i.e. due to cross origin policies.
But I also remember around an year ago I worked with chrome extension named 'Autofill' that could pre-select form elements whenever I opened new chrome window containing iframe.
So is there any work around?
You can set your extension permission to run content scripts in all frames as document at http://developer.chrome.com/extensions/content_scripts.html#registration by setting all_frames to true in the content scripts section of your manifest file. Adding to Google's example from that page, part of your manifest file might look like
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"],
"all_frames": true
}
],
...
}
You'll need to be careful since your content scripts are going to be inject into the page once for the parent page and one for each iFrame on the page. Once your content script is injected into all frames on the page you can work your magic with finding and highlighting text.
if (window === top) {
console.log('Running inside the main document', location.href);
} else {
console.log('Running inside the frame document', location.href,
[...document.querySelectorAll('*')]);
}
I'm kind of a newbie. I made a Firefox WebExtension add-on. It is very simple. The add-on changes words on the visited websites.
It has a manifest file that declares a content script.
My question is: How can I add a Browser UI button to the add-on?
Ultimately, my intent is to have the button allow the user to choose between seeing the website as delivered, or as modified by the the WebExtension. However, right now I'm just stuck on adding the button.
This is my manifest.json:
{
"manifest_version": 2,
"name": "Gordo",
"version": "1.0",
"description": "XXXXXX",
"icons": {
"48": "icons/img.png"
},
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["background.js"]
}
]
}
WebExtensions can add a browser UI button as either a Browser Action and/or a Page Action. You can have a maximum of one of each. For each, you can either have a button which code in your background script responds to (receives a click event), or the browser with show an HTML file you provide as a popup. You can set a default as to showing a popup, or getting a click. You can dynamically switch between the two by using setPopup() (setting to '' causes the click to fire; any other string and the referenced HTML file is used as the popup which is shown without triggering a click event).
Browser Action
You can add a button to the browser user interface by adding a browser_action key to your manifest.json:
"browser_action": {
"default_icon": "myIcon.png",
"default_title": "Do my thing",
"browser_style": true
}
You can then add a listener in your background script. However, you first have to have a background script. You can have one by adding a background key to your manifest.json:
"background": {
"scripts": [
"background.js"
]
}
Then, in background.js you can add a listener for the button click by using browserAction.onClicked.addListener():
chrome.browserAction.onClicked.addListener(function(tab) {
//Do what you want to do when the browser UI button is clicked.
});
Page Action
Alternately, instead of using a browser action, you can use a page action. The keys in the manifest.json and usage in your background script are very similar:
In your manifest.json use page_action:
"page_action": {
"default_icon": "myIcon.png",
"default_title": "Do my thing",
"browser_style": true
}
Then, in background.js you can add a listener for the button click by using pageAction.onClicked.addListener()
chrome.pageAction.onClicked.addListener(function(tab) {
//Do what you want to do when the browser UI button is clicked.
});
MDN says the following about page actions:
Page actions are like browser actions, except that they are associated with particular web pages rather than with the browser as a whole. If an action is only relevant on certain pages, then you should use a page action and display it only on relevant pages. If an action is relevant to all pages or to the browser itself, use a browser action.
While browser actions are displayed by default, page actions are hidden by default. They can be shown for a particular tab by calling pageAction.show(), passing in the tab's ID.
Showing a popup
You can have the default be to show a popup by adding a default_popup key to either the browser_action key, or the page_action key. The above browser_action could look like the following with a popup:
"browser_action": {
"default_icon": "myIcon.png",
"default_title": "Do my thing",
"browser_style": true
"default_popup": "myPopup.html"
}
I have been struggling with this issue since yesterday and I have run out of ideas to figure out what is going on.
I am developing a Chrome extension with a popup menu with a few buttons to fire certain events. The problem is that instead of showing the popup.html when clicking the icon extension, it just fires all associated events with the buttons.
My original extension had a persistent background script, so when I was debuggin it, the error that showed up was "cannot read property 'addeventlistener' of null". I have already looked it up and, apparently, it had to do with the position of the script src line inside the popup.html file. I tried relocating it but nothing changed.
After trying many alternatives to do the same in other ways and comparing my code with other sample extensions, I created a very simple extension to demonstrate the trouble I am dealing with. It's just a three-buttons popup and when you click each button, a message should appear showing some text. The files are:
popup.html
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<button id="OpenButton">Open</button>
<button id="StartButton">Start</button>
<button id="StopButton">Stop</button>
</body>
</html>
popup.js
function open(){alert("open");}
function start(){alert("start");}
function stop(){alert("stop");}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('OpenButton').addEventListener(
'click', open());
document.getElementById('StartButton').addEventListener(
'click', start());
document.getElementById('StopButton').addEventListener(
'click', stop());
});
manifest.json
{
"name": "A browser action with a popup that displays a message",
"description": "Display a message",
"version": "1.0",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_title": "Display this message.",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
Basically, I took a sample extension (it offered a popup with 4 buttons to change the background colour of the current page) and edited it. This extension worked fine, but in this new extension I made, when you click the extension icon, all three messages are displayed, one after another and no popup shows up.
I can't see where the conflict is and I couldn't find any question with the same issue. Any suggestion is really appreciated.
Regards.
Opening an alert() causes the popup window to lose focus.
Which, in turn, immediately closes it.
Don't use alert() in the popup - to debug, use console.log(), the output of which is accessible if you right-click your extension's browser action and select "Inspect popup".
I am writing a Chrome extension that adds a context menu item and performs an action when the user right-clicks a YouTube hyperlink.
My manifest file defines the background script as well as the javascript that is run when a link is clicked. Here are the relevant parts of my manifest.json file:
"background": {
"persistent": false,
"scripts": ["scripts/background.js"]
},
"content_scripts": [
{
"matches": ["*://*.youtube.com/*" , "*://youtube.com/*"],
"js": ["scripts/click.js"]
}
],
As you can see the background page uses the javascript file background.js and the context script uses click.js.
I am trying to debug click.js using the Chrome Developer Tools inspection utility but the problem I am running into is I can't figure out a way to get click.js to show up in the sources panel of the inspector.
If I go to the Chrome extensions page and click "Inspect views: background page" the inspector opens up but the only script shown is background.js.
If I right-click the extensions button (shown in the upper right) and select "Inspect popup" again I don't see click.js, only the javascript files that are loaded from within popup.html.
My question is, how do I debug javascript that is executed after a context menu click in Chrome? Should I "hack" it and force the script to always load click.js by adding it to the background page:
"background": {
"persistent": false,
"scripts": ["scripts/background.js", "scripts/click.js"]
},
If I did this, I could then see the script when inspecting the background page and set breakpoints, etc.
This seems like too much of a hack. There must be a more elegant way to inspect javascript files that aren't associated with the background page or any other html page (such as popup.html).
Is there a way to force the inspect window to load all javascript sources regardless of whether or not they are loaded with the page that is being inspected? Or is the inspection page limited to what is actually loaded, not the full set of scripts?
Thank you,
Clock
I know there is a way to make JS work in chrome extension: just include a default_popup parameter in your manifest.json to specify an HTML page, then include the JS onto the HTML using <script>. But is there a way to get JS to do some stuff without having to open a HTML page (e.g. change the icon of the extension without a HTML popup having to be opened)?
Yes, that is called background page. You can create it without a .html file, but it will dynamically create one for you, called _generated_background_page.html.
You can can add following to your manifest.json to specify a background page:
{
"name": "My extension",
...
"background": {
"scripts": ["background.js"]
},
...
}
To view the background page go to chrome://chrome/extensions activate "Developer mode" and you can see the background page with developer tools:
For your example, changing the icon, you could use the chrome.browserAction.