I am trying to open my web-extension options page from an injected button via a content-script onto a page. Here is the setup:
manifest setting:
"options_ui": {
"page": "options/options.html",
"open_in_tab":true
},
"web_accessible_resources": ["icons/icon.png", "icons/icon64.png","options/options.html"]
content-script.js:
Settings
What am I missing here? Also, I know moz-extension: might not be the best option for cross-browser operation but not sure what should be the correct namesapce?
EDIT:
I am using a fixed id in manifest as :
"applications": {
"gecko": {
"id": "{adacfr40-acra-e2e1-8ccb-e01fd0e08bde}"
}
},
Your content script, as shown, is actually a chunk of HTML and not JavaScript, as expected. So it wouldn't work. Perhaps that's not your actual code, just what you create?
But suppose you do adjust the content script to add a button and have a listener attached (out of scope for this question, I think). How to open the options page?
The canonical way is to call browser.runtime.openOptionsPage(), but that API can't be called from a content script.
Two options:
Stick with openOptionsPage(). In that case, you need a background (event) page that listens to Messaging, and then signal from the content script that you want the options page open.
The advantage of this approach is that you don't need to make the options page web-accessible.
If you insist on directly opening the page from the content script / a tag, you can, but you'll need to get the dynamically-allocated UUID for your extension instance.
The URL for your options page is not fixed, but should be obtained with browser.runtime.getURL("options.html"), and that URL should be used in the link creation.
This method requires declaring it as web-accessible.
Related
In my chrome extension I want to have a background script for obvious reasons. However I now also want to have a background page in which I like right here discribed load some html (Chrome extension: loading a hidden page (without iframe)) using an iFrame which I can interact with using a content script. But when I'm trying to load both the background script and the background page like so:
...
"background":{
"scripts": ["background_script.js"]
},
"background": {
"page": "iFrameBackground.html",
"persistent": true
},
...
and then try to send a message from my content script to the background script I get this error:
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
So either I'm missing something entirely here or are you really just able to use one of the two?
Thank you :)
Problems
Only one declaration method can be used.
Your json is invalid as it has two identical keys so Chrome won't even install it.
Solution
Choose just one method. Any method.
You can access DOM in your background script/page regardless of the way it's declared.
The result of each method is identical: they both create a background page. An extension can have just one background page where any amount of background scripts are loaded - just like in any other web page. The scripts method exists just for convenience: it simply generates a dummy HTML page as you can see in devtools inspector for the background page.
What I have so far:
manifest.json
{
"name": "Append Test Text",
"description": "Add test123 to body",
"version": "1.0",
"permissions": [
"activeTab"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Append Test Text"
},
"manifest_version": 2,
"permissions": [
"https://*/*",
"http://*/*",
"tabs"
]
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'var div=document.createElement("div"); document.body.appendChild(div); div.innerText="test123";'
});
});
What it does:
Upon clicking the chrome extension icon, it adds <div>test123</div> to the <body></body> of any given page.
What I Would Like To Achieve:
Alike the bit.ly Chrome extension, I would like to append a lot of content to the DOM. Upon clicking on the extension icon, I would like an overlay element to be added tot he <body></body> along with a sidebar where I can add jQuery tab switches.
As you can see, I've just taken this picture whilst creating this question for StackOverflow.
Questions:
Regarding my current progress and/or any scripts you may submit with your answer; How can I give this appended element an ID and/or class name and check whether this is already present on the DOM before adding it over and over again upon clicking the icon.
How can I append a lot of content to the page to reside within my sidebar. jQuery is present within the site I am creating this extension to be used on. Am I able to create a standard HTML file which is then fetched and then programmatic injected into the DOM which I can use jQuery scripts on for the likes of switching tabs (not Chrome tabs, tabs within the injected content).
Why not take a look at how bit.ly extension does it?
Looking at the code, bit.ly appends a fixed position, 100% width/height iframe to the page that contains an "app" page from the package. Clicking again removes the iframe. There's a bit of special code to work with frameset pages (which I won't comment on here), but other than that that's the general idea.
Part of the page is half-transparent, which gives the illusion of a sidebar, but it does indeed cover the whole page. This is the easiest way to do it, since otherwise you risk breaking the page's layout and there is no general "magic" solution that works everywhere to have your content side by side.
// Injection
var iframe = document.createElement("iframe");
iframe.id = "my-awesome-extension-iframe";
iframe.style.width = "100%";
/* ..more styling like that.. */
iframe.src = chrome.runtime.getURL('my_ui.html');
document.body.appendChild(iframe);
// Removal
var iframe = document.getElementById("my-awesome-extension-iframe");
if (iframe) {
iframe.parentNode.removeChild(iframe);
}
To have full control over the looks of your UI, injecting a frame is preferable, as the page's own CSS and scripts won't "bleed" into your context. Whatever libraries you want, you can include there as you would in a normal page.
If you vehemently object to the idea of using a frame, you can try and inject your UI directly into the page - but beware interfering/incompatible code, restrictive CSP and CSS that bleeds through. This question is relevant: How to really isolate stylesheets in the Google Chrome extension?
You could make the above snippets as separate files, and use executeScript with the file attribute to inject them. They do not require any libraries like jQuery.
Note that code in that frame will have the same level of privilege as content script code - if you need APIs unavailable in content scripts, you'll need to message the background to do it. You'll also need to list the page itself, and all of its resources, in web_accessible_resources.
Dynamic DOM elements may be the way to go if you are adding simple user controls inside a layout. However, if you want to inject a full layout it can be a pain. jQuery may come handy with its function load.
You could have the layout of your sidebar in a static HTML file and have it loaded with jQuery in a given container. Something like this should do it, assuming an id="myContainer":
jQuery
$('#myContainer').load('layout.html')
To answer the first question, to give a specific ID to a dynamically created element, you only have to treat it like a DOM element and set an id to it.
JavaScript
var myElement = document.createElement('div');
myElement.id = 'myContainer';
myElement.className = 'kitten-background jumbo button';
// ...
// other properties you may need
// ...
document.body.appendChild(myElement);
For the second question, to check if an element exists you may as well use jQuery again. If a selector matches something, its length attribute will be greater than zero so that's a clean validation to check that $('#myContainer').length == 0 before inserting.
Good luck in what you are trying to achieve and have fun!
First of all, all the answers will be much appriciated, as I'm running out of my own ideas.
I have a "simple" problem to tackle. I wanna do a chrome extension, which would basically track the websites you're visiting (with content included). To clarify, we have full consent of the users to do this. :-)
What I did so far, isn't working well (I've tried to use many of the hooks provided by chrome API, ie chrome.webNavigation.onCommitted, chrome.webRequest.onBeforeRequest, chrome.webNavigation.onCompleted, chrome.webRequest.onBeforeRedirect, chrome.history.onVisited).
The best option so far is to use chrome.history.onVisited, but then again, I've no idea how to get website content from it - I've tried to execute content script which returns document.documentElement.outerHTML, but in order to do so I need to know tabId, which isn't available there.
Basically, something is messed up in chrome API or my thinking - probably the latter :)
I want to point out, that it almost works, but not on all cases. It's hard for me to debug which cases fail though.
Thanks a lot for all the tips I can get!
Based on your clarification in a comment I could suggest you to use content scripts and message passing.
At the moment when the user press "start recording" button you can - from the background page - execute content script which will intersect content of the pages already opened and then will send it back to the background page for further processing (save possibly). You can query for all tabs in any window using chrome.tabs.query function:
chrome.tabs.query({}, function(tabs){
console.log(tabs); //tabs array contain all tabs in all windows.
});
Iterating over this array you can execute script in all tabs using it's tab.id:
tabs.forEach(function(tab){
chrome.tabs.executeScript(tab.id, { 'file': 'cs.js' })
});
Then you can attach event handler to listen up for changes in tabs:
chrome.tabs.onUpdated.addListener(function(change){
if(change.status === 'complete'){
//inject content script
}
});
Second scenario is to add content script to every page user visits adding proper manifest entry:
...
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["cs.js"]
}
],
...
After cs.js load you can call background page and ask it if the extension should capture page content (using messaging passing). If yes - do the same as above, if not, just do nothing.
It is the easiest and most convenient way of doing what you need.
The crossrider sidepanel is simply an iframe (you can use js-injected html, but I'm interested in using an iframe to reduce interference with the rest of the page). I'm having trouble getting any interaction between my browser extension and the iframe at all.
I see no point at all in adding a sidepanel with an extension unless you can do some basic JS communication. In this case I want a few options, checkboxes etc, in the iframe which control the extension. Since this plugin exists, I'm assuming there must be a way.
Ideally I'd like to have some basic input handling js in the child iframe and have it send back the odd save/load command. Is the answer really some form of message passing? If so which API should I be using here?
I believe this is related: Accessing iframe from chrome extension
[EDIT]
OK, so I've tried a few things...
It seems the expected usage is to host the iframe's html content somewhere. A bit strange considering it should be local and part of the extension. What happens if you want to view some pages offline?? This is just silly and I'm dismissing it as an option. Why waste resources hosting something that should just be available locally.
The alternative is to provide the HTML that goes in the sidebar. Note that this HTML doesn't get put in an iframe. I like the idea of an iframe because it keeps the CSS and JS very separate, so there's minimal interference between a page and your extension.
So I tried creating an iframe via the html sidebar attribute with and ID and injected the content after a 100ms delay using myiframe.contentWindow.document.open/writeln/close(). This works fine on chrome but fails in firefox with a security error (The operation is insecure on open()).
Another way is to provide the iframe content via the src url (for the sidebar I use a data address for the url attribute): Html code as IFRAME source rather than a URL. This works in firefox but results in a CORS error in chrome: The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "data". Protocols must match. and Warning: Blocked a frame with origin "http://localhost" from accessing a cross-origin frame. Function-name: appAPI.message.addListener
These CORS issues strike me as really daft. It's all my code coming from the same extension, injected into the same page. There's no cross origin happening, I created the damn thing. If I have the power to change the origin, then it's not secure in the first place so why bother.
Assuming you are using the url sidebar property to load your sidebar's HTML (i.e. a hosted web page), you can use the extension's Run in Iframe feature to communicate between the iframe extension and the parent window's extension.
To achieve this, first enable the extension to run in iframes (Settings > Run in Iframes) and then you can use the extension.js to load your sidebar and handle messaging. For example, the following code loads a page that has a button with identification btnSave:
Hosted web page file:
<html>
<head>
</head>
<body>
<div id="mySidebar">
My sidebar form
<br />
<button id="btnSave">Save</button>
</div>
</body>
</html>
extension.js file:
appAPI.ready(function($) {
// Check if running in iframe and the sidebar page loaded
if (appAPI.dom.isIframe() && $('#mySidebar').length) {
// Set click handler for button to send message to parent window
$('#btnSave').click(function() {
appAPI.message.toCurrentTabWindow({
type:'save',
data:'My save data'
});
});
// End of Iframe code ... exit
return;
}
// Parent window message listener
appAPI.message.addListener(function(msg) {
if (msg.type === 'save') {
console.log('Extn:: Parent received data: ' +
appAPI.JSON.stringify(msg.data));
}
});
// Create the sidebar
var sidebar = new appAPI.sidebar({
position:'right',
url: 'http://yourdomain.com/sidebar_page.html',
title:{
content:'Sidebar Title',
close:true
},
opacity:1.0,
width:'300px',
height:'650px',
preloader:true,
sticky:true,
slide:150,
openAction:['click', 'mouseover'],
closeAction:'click',
theme:'default',
scrollbars:false,
openOnInstall:true,
events:{
onShow:function () {
console.log("Extn:: Show sidebar event triggered");
},
onHide:function () {
console.log("Extn:: Hide sidebar event triggered");
}
}
});
});
However, if you are using the html sidebar property to load your sidebar's HTML, then this solution will not work since the extension does not run in this context. However, you may be able to utilize the methods described in the StackOverflow thread you quoted to communicate with the parent window (this would be browser specific) that in turn can communicate with the extension using our CrossriderAPI event.
[Disclaimer: I am a Crossrider employee]
How should I connect my pages to search and highlight text on current tab?
Currently I have:
manifest.json does defining content/backgr/event page do significant things,auto inject code etc?
popup.html essentially a shell for the search input which is used by search.js
search.js should this be in background/event/content/popup.html page?
What I still don't understand after reading:
What is a content page vs. background/event page?
I know one is constantly running vs injected, but that's as much as I got from the chrome extension manual, I still don't quite understand if the content script/page is seperate from the popup.html for example and what the difference between a script in the popup.html vs content page/script is.
What I know:
I know how to search for text on a page, and replace it or change its style etc. using JS.
I need to read up on the messaging API for Chrome Extensions.
I know I need to know how to use the messaging API, is it going to be required for page search and highlighting?
Summary:
I don't need a walk through or full answer, just a little help visualizing how Chrome extensions work, or at minimum how I should set mine up in relation to page interaction IE:
search.js content page injected >>>>> popup.html
and maybe a short bit about how injection works in chrome extensions(IE, do I only need to specify that it is content page in manifest.json to have it injected or is there more work to it)/expected behavior?
Apologies for the jumbled thoughts/question/possibly missing the things relevant to my questions while reading the manual.
I will start with making the purpose of each kind of page/script more clear.
First is the background page/script. The background script is where your extension lives. It isn't required, but in order to do most extension things, you need one. In it you can set up various event listeners and such depending on what you want it to do. It lives in its own little world and can only interact with other pages and scripts using the chrome.* apis. If you set it up as an event page it works exactly the same except that it unloads when not in use and loads back into memory when it has something to do.
Content scripts refer to injected Javascript and/or css. They are the primary tool used for interacting with web pages. They have very limited access to chrome.* apis, but they have full access to the DOM of the page they are injected into. We will come back to using them in a minute.
Now for Popup pages. Unlike the background script and content script, popups have both a HTML and JS portion. The HTML part is just like any other page, just small and as a overlay popup coming out from the icon. The script portion of it, however, can do all the things the background page does, except that it unloads whenever the popup is closed.
Now that the distinctions are more clear let's move on to what you want to do. It sounds like you want to open the popup, have the user enter text to search for in the current tab, then highlight that text on the page. Since you said that you already know how you plan on highlighting the text, I will leave that part to you.
First to set up our manifest file. For this particular action, we don't need a background script. What we do need is both the "tabs" and "activeTab" permissions. These will enable us to inject our script later. We also need to define the browser action with it's popup. Altogether it would look something like this:
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "activeTab"
]
Now in our popup.html file, we can only have markup and css, no inline code at all. We will put it all in our js file and include it. Something like this should work:
<!DOCTYPE html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<input type="text" id="searchText">
<button id="searchButton">Search</button>
</body>
</html>
This is where we come back to the content script stuff. There are two ways to inject a content script, first is to define it in the manifest. This works best when you always want to inject it for a particular set of url's. Second, to use the chrome.tabs.executeScript method to inject it when we need to. That is what we will use.
window.onload = function(){
document.getElementById('searchButton').onclick = searchText;
};
function searchText(){
var search = document.getElementById('searchText').value;
if(search){
chrome.tabs.query({active:true,currentWindow:true},function(tabs){
chrome.tabs.executeScript(tabs[0].id,{file:search.js});
chrome.tabs.sendMessage(tabs[0].id,{method:'search',searchText:search});
});
}
}
With this, we have successfully injected our script and then send the search text to that script. Just make sure that the script is wrapped in a onMessage listener like this:
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
// message.searchText is the text that was captured in the popup
// Search/Highlight code goes here
});
And that pretty much sums it up. With that, you should be able to get it working. If something is still not clear let me know and I will fix it.
I think what's confusing you is the non-existant concept of a "content page". There is no such thing. What you're likely referring to is a "content script". Let me explain the three main components of an extension:
Background Page
As you said, this is the persistent aspect of a Chrome Extension. Even though it can be HTML page it is never rendered. You simply use it to run JavaScript and other content that stays persistent. The only way to "refresh" the background page is to refresh the extension in the extension manager, or to re-install the extension.
This is most useful for saving information that should remain persistent, such as authentication credentials, or counters that should build up over time. Only use the background page when absolutely necessary, though, because it consumes resources as long as the user is running your extension.
You can add a background script like to manafest file like this:
"background": {
"scripts": [
"background.js"
]
},
Or like this:
"background": {
"page": "background.html"
},
Then simply add background.js to background.html via a typical tag.
Popup
This is what you see when you click the icon on the toolbar. It's simply a popup window with some HTML. It can contain HTML, JavaScript, CSS, and whatever you would put in a normal web page.
Not all extension need a popup window, but many do. For example, your highlight extension may not need a popup if all it's doing is highlighting text on a page. However, if you need to collect a search result (which seems likely) or provide the user with some settings or other UI then a popup is a good way to go about this.
You can add a popup to the manifest file like this:
"browser_action": {
"default_popup": "popup.html"
},
Content script
As I mentioned, this is not a "page" per se -- it a script, or set of scripts. A content script is what you use to infuse JavaScript into pages the user is browser. For example, a user goes to Facebook and a content script could change the background to red. This is almost certainly what you'll need to use to highlight text on a page. Simply infuse some JavaScript and any necessarily libraries to search the page or crawl the dom, and render changes to that page.
You can inject content scripts every time a user opens any URL like this:
"content_scripts": [
{
"matches" : [
"<all_urls>"
],
"js" : [
"content.js"
]
}
],
The above injects "content.js" into "all urls".
You'll also need to add this to the permissions:
"permissions": [
"<all_urls>",
]
You can even add JQuery to the list of content scripts. The nice thing about extensions is that the content scripts are sandboxed, so the version of JQuery you inject will not collide with JQuery on pages the user visits.