SWFobject in a Chrome Extension - API Unavaiable - google-chrome

Hi!
I'm building a Chrome extension, in which I need to embed a SWFobject in the background page.
Everything works, except the JavaScript controls for the SWFobject and the eventListeners.
My guess is that it has something to do with the cross-domain policies, because while testing the page on a webserver everything worked fine.
Anyway, here's a snippet:
In the main page:
var playerView = chrome.extension.getBackgroundPage();
$('#playerPause').click(function(){
playerView.playerPause();
});
In the background:
function playerPause() {
if (postData[nowPlaying].provider == 'youtube' ) {
player.pauseVideo();
}
else if (postData[nowPlaying].provider == 'soundcloud' ) {
player.api_pause();
};
}
And the eventListeners:
soundcloud.addEventListener('onMediaEnd', playerNext);
function onYouTubePlayerReady(player) {
player.addEventListener("onStateChange", "function(state){ if(state == 0) { playerNext(); } }");
}
In the console it throws
"Uncaught TypeError: Object # has no method
'pauseVideo'"
for both the Youtube embed the Soundcloud one.
Also, the SWFobject is embedded like this (and works):
function loadTrack (id) {
if(postData[id].provider == 'youtube') {
swfobject.embedSWF(
"http://www.youtube.com/e/" + postData[id].url + "?enablejsapi=1&playerapiid=player",
"player",
"1",
"1",
"8",
null,
{
autoplay: 1
},
{
allowScriptAccess: "always"
},
{
id: "player"
}
);
}
else if(postData[id].provider == 'soundcloud') {
swfobject.embedSWF(
'http://player.soundcloud.com/player.swf',
'player',
'1',
'1',
'9.0.0',
'expressInstall.swf',
{
enable_api: true,
object_id: 'player',
url: postData[id].url,
auto_play: true
},
{
allowscriptaccess: 'always'
},
{
id: 'player',
name: 'player'
}
);
}
}
Sorry for the lengthy post, I wanted to provide as much information as possible.
Also, I know the code isn't pretty, this was only my second application ;)
Thanks a lot in advance to anyone who can help,
Giacomo

You can have a look at this extension, you can not access local connection in chrome extension, but you can run a content script as a proxy script instead.(You can serve a proxy page on gae or any other free servers)

The problem here is that you can't use inline scripts or inline event handlers in chrome extensions ever since the manifest evolved to v2.
You should have added the manifest file for me to understand what's going on better. But briefly all you CAN ever do is
In the main page,
Remove all inline scripts and move them to an external JS file.
Remove inline event listeners, move them to the same or another external JS and use
addEventListener().
But the issue is, You can't execute calls to the swf in the background page or expect it to return anything. All these will continue to give you "Uncaught TypeError" Exception.
Take the case of a webcam image capturing swf, the webcam will be streamed to the page, but the function call to it can never be made and hence the image will never be captured.
My project to scan QR codes from the addons popup met the ruins due to this.

Related

Can a website detect extensions that are installed using Developed Mode? [duplicate]

I am in the process of building a Chrome extension, and for the whole thing to work the way I would like it to, I need an external JavaScript script to be able to detect if a user has my extension installed.
For example: A user installs my plugin, then goes to a website with my script on it. The website detects that my extension is installed and updates the page accordingly.
Is this possible?
Chrome now has the ability to send messages from the website to the extension.
So in the extension background.js (content.js will not work) add something like:
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {
if (request) {
if (request.message) {
if (request.message == "version") {
sendResponse({version: 1.0});
}
}
}
return true;
});
This will then let you make a call from the website:
var hasExtension = false;
chrome.runtime.sendMessage(extensionId, { message: "version" },
function (reply) {
if (reply) {
if (reply.version) {
if (reply.version >= requiredVersion) {
hasExtension = true;
}
}
}
else {
hasExtension = false;
}
});
You can then check the hasExtension variable. The only drawback is the call is asynchronous, so you have to work around that somehow.
Edit:
As mentioned below, you'll need to add an entry to the manifest.json listing the domains that can message your addon. Eg:
"externally_connectable": {
"matches": ["*://localhost/*", "*://your.domain.com/*"]
},
2021 Update:
chrome.runtime.sendMessage will throw the following exception in console if the extension isn't installed or it's disabled.
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist
To fix this, add this validation inside the sendMessage callback
if (chrome.runtime.lastError) {
// handle error
}
I am sure there is a direct way (calling functions on your extension directly, or by using the JS classes for extensions), but an indirect method (until something better comes along):
Have your Chrome extension look for a specific DIV or other element on your page, with a very specific ID.
For example:
<div id="ExtensionCheck_JamesEggersAwesomeExtension"></div>
Do a getElementById and set the innerHTML to the version number of your extension or something. You can then read the contents of that client-side.
Again though, you should use a direct method if there is one available.
EDIT: Direct method found!!
Use the connection methods found here: https://developer.chrome.com/extensions/extension#global-events
Untested, but you should be able to do...
var myPort=chrome.extension.connect('yourextensionid_qwerqweroijwefoijwef', some_object_to_send_on_connect);
Another method is to expose a web-accessible resource, though this will allow any website to test if your extension is installed.
Suppose your extension's ID is aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa, and you add a file (say, a transparent pixel image) as test.png in your extension's files.
Then, you expose this file to the web pages with web_accessible_resources manifest key:
"web_accessible_resources": [
"test.png"
],
In your web page, you can try to load this file by its full URL (in an <img> tag, via XHR, or in any other way):
chrome-extension://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/test.png
If the file loads, then the extension is installed. If there's an error while loading this file, then the extension is not installed.
// Code from https://groups.google.com/a/chromium.org/d/msg/chromium-extensions/8ArcsWMBaM4/2GKwVOZm1qMJ
function detectExtension(extensionId, callback) {
var img;
img = new Image();
img.src = "chrome-extension://" + extensionId + "/test.png";
img.onload = function() {
callback(true);
};
img.onerror = function() {
callback(false);
};
}
Of note: if there is an error while loading this file, said network stack error will appear in the console with no possibility to silence it. When Chromecast used this method, it caused quite a bit of controversy because of this; with the eventual very ugly solution of simply blacklisting very specific errors from Dev Tools altogether by the Chrome team.
Important note: this method will not work in Firefox WebExtensions. Web-accessible resources inherently expose the extension to fingerprinting, since the URL is predictable by knowing the ID. Firefox decided to close that hole by assigning an instance-specific random URL to web accessible resources:
The files will then be available using a URL like:
moz-extension://<random-UUID>/<path/to/resource>
This UUID is randomly generated for every browser instance and is not your extension's ID. This prevents websites from fingerprinting the extensions a user has installed.
However, while the extension can use runtime.getURL() to obtain this address, you can't hard-code it in your website.
I thought I would share my research on this.
I needed to be able to detect if a specific extension was installed for some file:/// links to work.
I came across this article here
This explained a method of getting the manifest.json of an extension.
I adjusted the code a bit and came up with:
function Ext_Detect_NotInstalled(ExtName, ExtID) {
console.log(ExtName + ' Not Installed');
if (divAnnounce.innerHTML != '')
divAnnounce.innerHTML = divAnnounce.innerHTML + "<BR>"
divAnnounce.innerHTML = divAnnounce.innerHTML + 'Page needs ' + ExtName + ' Extension -- to intall the LocalLinks extension click here';
}
function Ext_Detect_Installed(ExtName, ExtID) {
console.log(ExtName + ' Installed');
}
var Ext_Detect = function (ExtName, ExtID) {
var s = document.createElement('script');
s.onload = function () { Ext_Detect_Installed(ExtName, ExtID); };
s.onerror = function () { Ext_Detect_NotInstalled(ExtName, ExtID); };
s.src = 'chrome-extension://' + ExtID + '/manifest.json';
document.body.appendChild(s);
}
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (is_chrome == true) {
window.onload = function () { Ext_Detect('LocalLinks', 'jllpkdkcdjndhggodimiphkghogcpida'); };
}
With this you should be able to use Ext_Detect(ExtensionName,ExtensionID) to detect the installation of any number of extensions.
Another possible solution if you own the website is to use inline installation.
if (chrome.app.isInstalled) {
// extension is installed.
}
I know this an old question but this way was introduced in Chrome 15 and so I thought Id list it for anyone only now looking for an answer.
Here is an other modern approach:
const checkExtension = (id, src, callback) => {
let e = new Image()
e.src = 'chrome-extension://'+ id +'/'+ src
e.onload = () => callback(1), e.onerror = () => callback(0)
}
// "src" must be included to "web_accessible_resources" in manifest.json
checkExtension('gighmmpiobklfepjocnamgkkbiglidom', 'icons/icon24.png', (ok) => {
console.log('AdBlock: %s', ok ? 'installed' : 'not installed')
})
checkExtension('bhlhnicpbhignbdhedgjhgdocnmhomnp', 'images/checkmark-icon.png', (ok) => {
console.log('ColorZilla: %s', ok ? 'installed' : 'not installed')
})
I used the cookie method:
In my manifest.js file I included a content script that only runs on my site:
"content_scripts": [
{
"matches": [
"*://*.mysite.co/*"
],
"js": ["js/mysite.js"],
"run_at": "document_idle"
}
],
in my js/mysite.js I have one line:
document.cookie = "extension_downloaded=True";
and in my index.html page I look for that cookie.
if (document.cookie.indexOf('extension_downloaded') != -1){
document.getElementById('install-btn').style.display = 'none';
}
You could have the extension set a cookie and have your websites JavaScript check if that cookie is present and update accordingly. This and probably most other methods mentioned here could of course be cirvumvented by the user, unless you try and have the extension create custom cookies depending on timestamps etc, and have your application analyze them server side to see if it really is a user with the extension or someone pretending to have it by modifying his cookies.
There's another method shown at this Google Groups post. In short, you could try detecting whether the extension icon loads successfully. This may be helpful if the extension you're checking for isn't your own.
Webpage interacts with extension through background script.
manifest.json:
"background": {
"scripts": ["background.js"],
"persistent": true
},
"externally_connectable": {
"matches": ["*://(domain.ext)/*"]
},
background.js:
chrome.runtime.onMessageExternal.addListener(function(msg, sender, sendResponse) {
if ((msg.action == "id") && (msg.value == id))
{
sendResponse({id : id});
}
});
page.html:
<script>
var id = "some_ext_id";
chrome.runtime.sendMessage(id, {action: "id", value : id}, function(response) {
if(response && (response.id == id)) //extension installed
{
console.log(response);
}
else //extension not installed
{
console.log("Please consider installig extension");
}
});
</script>
Your extension could interact with the website (e.g. changing variables) and your website could detect this.
But there should be a better way to do this. I wonder how Google is doing it on their extension gallery (already installed applications are marked).
Edit:
The gallery use the chrome.management.get function. Example:
chrome.management.get("mblbciejcodpealifnhfjbdlkedplodp", function(a){console.log(a);});
But you can only access the method from pages with the right permissions.
A lot of the answers here so far are Chrome only or incur an HTTP overhead penalty. The solution that we are using is a little different:
1. Add a new object to the manifest content_scripts list like so:
{
"matches": ["https://www.yoursite.com/*"],
"js": [
"install_notifier.js"
],
"run_at": "document_idle"
}
This will allow the code in install_notifier.js to run on that site (if you didn't already have permissions there).
2. Send a message to every site in the manifest key above.
Add something like this to install_notifier.js (note that this is using a closure to keep the variables from being global, but that's not strictly necessary):
// Dispatch a message to every URL that's in the manifest to say that the extension is
// installed. This allows webpages to take action based on the presence of the
// extension and its version. This is only allowed for a small whitelist of
// domains defined in the manifest.
(function () {
let currentVersion = chrome.runtime.getManifest().version;
window.postMessage({
sender: "my-extension",
message_name: "version",
message: currentVersion
}, "*");
})();
Your message could say anything, but it's useful to send the version so you know what you're dealing with. Then...
3. On your website, listen for that message.
Add this to your website somewhere:
window.addEventListener("message", function (event) {
if (event.source == window &&
event.data.sender &&
event.data.sender === "my-extension" &&
event.data.message_name &&
event.data.message_name === "version") {
console.log("Got the message");
}
});
This works in Firefox and Chrome, and doesn't incur HTTP overhead or manipulate the page.
You could also use a cross-browser method what I have used.
Uses the concept of adding a div.
in your content script (whenever the script loads, it should do this)
if ((window.location.href).includes('*myurl/urlregex*')) {
$('html').addClass('ifextension');
}
in your website you assert something like,
if (!($('html').hasClass('ifextension')){}
And throw appropriate message.
If you have control over the Chrome extension, you can try what I did:
// Inside Chrome extension
var div = document.createElement('div');
div.setAttribute('id', 'myapp-extension-installed-div');
document.getElementsByTagName('body')[0].appendChild(div);
And then:
// On web page that needs to detect extension
if ($('#myapp-extension-installed-div').length) {
}
It feels a little hacky, but I couldn't get the other methods to work, and I worry about Chrome changing its API here. It's doubtful this method will stop working any time soon.
If you're trying to detect any extension from any website,
This post helped: https://ide.hey.network/post/5c3b6c7aa7af38479accc0c7
Basically, the solution would be to simply try to get a specific file (manifest.json or an image) from the extension by specifying its path. Here's what I used. Definitely working:
const imgExists = function(_f, _cb) {
const __i = new Image();
__i.onload = function() {
if (typeof _cb === 'function') {
_cb(true);
}
}
__i.onerror = function() {
if (typeof _cb === 'function') {
_cb(false);
}
}
__i.src = _f;
__i = null;
});
try {
imgExists("chrome-extension://${CHROME_XT_ID}/xt_content/assets/logo.png", function(_test) {
console.log(_test ? 'chrome extension installed !' : 'chrome extension not installed..');
ifrm.xt_chrome = _test;
// use that information
});
} catch (e) {
console.log('ERROR', e)
}
Here is how you can detect a specific Extension installed and show a warning message.
First you need to open the manifest file of the extension by going to chrome-extension://extension_id_here_hkdppipefbchgpohn/manifest.json and look for any file name within "web_accessible_resources" section.
<div class="chromewarning" style="display:none">
<script type="text/javascript">
$.get("chrome-extension://extension_id_here_hkdppipefbchgpohn/filename_found_in_ web_accessible_resources.png").done(function () {
$(".chromewarning").show();
}).fail(function () {
// alert("failed.");
});
</script>
<p>We have detected a browser extension that conflicts with learning modules in this course.</p>
</div>
Chrome Extension Manifest v3:
const isFirefox = chrome.runtime.OnInstalledReason.CHROME_UPDATE != "chrome_update";
For FireFox, I believe chrome.runtime.OnInstalledReason.BROWSER_UPDATE will be "browser_update": https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/OnInstalledReason

Return HTTPS response from "data:text/javascript" for chrome extension

I'm making an extension in chrome which captures a webrequests from my site and makes some modifications to the javascript source as per the user needs and then returns the results
chrome.webRequest.onBeforeRequest.addListener(
function (details) {
if (details.url.includes(param)) {
doChanges();
return { redirectUrl: "data:text/javascript," +encodeURIComponent(code);};
}
},
{ urls: ["<all_urls>"] },
["blocking"]);
the "code" variable here is the modified code.
But when i run this, chrome is sending an error that mixed content is being loaded, and ends the request.
So is there any way i could bypass this or maybe try a different approach?
Thanks in advance.

chrome.tabCapture.capture returned stream is undefined

I've got some js code in a chrome background extension of the following :
function handleCapture(stream) {
console.log('content captured');
console.log("backround.js stream: ", stream);
alert(stream);
// localStream = stream; // used by RTCPeerConnection addStream();
// initialize(); // start signalling and peer connection process
}
function captureCurrentTab() {
console.log('reqeusted current tab');
chrome.tabs.getSelected(null, function(tab) {
console.log('got current tab');
var selectedTabId = tab.id;
chrome.tabCapture.capture({
audio : false,
video : true
}, handleCapture);
});
}
However, when this is ran, the "handleCapture" variable "stream" that is passed in is always undefined? Is this to be expected or is there something that I am missing here?
Also, I've confirmed that my manifest.json contains the capture permission and I am using chrome canary Version 31.0.1607.1 canary Aura.
Thanks,
Mike
I had this same issue when I was trying to drive a tabCapture purely from a background script, I found this on the tabCapture reference page:
Captures the visible area of the currently active tab. This method can only be used on the currently active page after the extension has been invoked, similar to the way that activeTab works. Note that Chrome internal pages cannot be captured.
My understanding is that this means you need to drive it from a browserAction for your extension, like so:
chrome.browserAction.onClicked.addListener(function(request) {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabCapture.capture({audio: true, video: true}, callback);
});
});
That's what worked for me.
You should probably provide some constraints to make it work. See:
http://developer.chrome.com/extensions/tabCapture.html#type-MediaStreamConstraint
The capture param you provided is a MediaTrackConstraint, see:
http://dev.w3.org/2011/webrtc/editor/getusermedia.html#mediastreamconstraints
that is also a simple JS object, where you should set some mandatory options, see:
http://dev.w3.org/2011/webrtc/editor/getusermedia.html#idl-def-MediaTrackConstraints
So the following should help, if you set all the needed settings in mandatory object:
chrome.tabCapture.capture({
audio : false,
video : true,
videoConstraints: {
mandatory: {
width: { min: 640 },
height: { min: 480 }
}
}
}, handleCapture);

How to get the root folder in Chrome Extensions?

I am developing a Chrome Extesion for the first time and I am following the only guide that explains something about that: HTML5 ROCKS - FILESYSTEM.
I need to get storage for my extension and I resolved so:
window.webkitStorageInfo.requestQuota(window.PERSISTENT,1024*1024, onInitFs, errorHandler);
Ok, it works.
Now I need to create a xml file into the root, but in "onInitFs" the "fs" var is only a number and "fs.root" can't get it.
function onInitFs(fs){
console.log(fs.root); // -> Undefined
fs.root.getFile('list.xml', {create: true, exclusive: true}, function(fileEntry) {
fileEntry.isFile === true;
fileEntry.name == 'list.xml';
fileEntry.fullPath == '/list.xml';
}, errorHandler);
}
Can anybody explain why it doesn't work and how to resolve this issue?
Using RequestFileSystem within Chrome Extension
In order to use the FileSystem API as a root filesystem for your Chrome extension, you can actually use window.webkitRequestFileSystem instead of requestQuota.
window.webkitRequestFileSystem(window.PERSISTENT, 1024 * 1024, function (filesystem) {
console.log(filesystem);
console.log(filesystem.root);
}, function (e) { console.log("Could not request File System"); });
This does print correctly on Chrome 15,16 and 17 for me:
DOMFileSystem
DirectoryEntry
Using requestQuota for HTML5 apps
Just for reference, this would be the way to actually request the quota (i.e., when not using a Chrome Extension). You have to request the quota (the user sees a little banner at the top of his/her window) first. The RequestFileSystem is called if the user accepts.
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {
window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
}, function(e) {
console.log('Error requesting filesystem', e);
});
Eventually it might be necessary to request quota within an extension. Currently this can be circumvented with the unlimitedStorage permission. For the current state of implementation/storage types, see http://code.google.com/chrome/whitepapers/storage.html
Until current stable version 17.x, you cannot use HTML5 FileSystem API in Chrome extension. I have try this, the browser will crash down if I call FileSystem API in background page.
And here is a HTML5 API list what you can use in Chrome extension:
http://code.google.com/chrome/extensions/api_other.html

How to access google chrome extension from any page's javascript

I am trying to figure out how can I call into my extension from a normal web page.
All documentation that I find seems to be either for communication between extensions, or between content scripts and extensions.
Any pointers are much appreciated!
I think you should make a content script, that injects an object into your page that calls your extension.
Create a content script that injects YourExt.js into every page, which should contain:
var YourExt = {
doThis: function () {
chrome.extension.sendRequest('doThis');
},
doThat: function () {
chrome.extension.sendRequest({
action: 'doThat',
params: ['foo','bar']
});
}
}
While extensions can't access page variables and vice versa, you can communicate between page and extension through events. Here is a quick example of creating custom events:
function fireEvent(name, target) {
//Ready: create a generic event
var evt = document.createEvent("Events")
//Aim: initialize it to be the event we want
evt.initEvent(name, true, true); //true for can bubble, true for cancelable
//FIRE!
target.dispatchEvent(evt);
}
function foobar() {
alert("foobar");
}
function testEvents() {
window.addEventListener("foobar", foobar, false); //false to get it in bubble not capture.
fireEvent("foobar", document);
}
(taken from here)
So if you need to pass information from a page to an extension, you would need to fire a custom event on a page which you will be listening to in your content script.