Using Google Fusion Table layer in Chrome Extension - google-chrome

I am trying to replicate this demo code:
https://developers.google.com/fusiontables/docs/samples/circle_example?hl=en
which uses a FusionTablesLayer to query the data in the fusion table. Primarily
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'lat',
from: tableid,
where: 'ST_INTERSECTS(lat, CIRCLE(LATLNG(44.988265,-93.259191), 5000))'
},
key: myKey
});
layer.setMap(map);
I have it working as a stand along page, with all the JS moved to another file, per the Chrome Extension guidelines. I have modified the manifest file to allow all the referenced servers in the content security policies setting.
{
"name": "GDG Twin Cities - Fusion Tables and Chrome extensions",
"version": "1.0",
"manifest_version": 2,
"content_security_policy": "script-src 'self' https://maps.google.com https://maps.gstatic.com; object-src 'self'",
"description": "Moving Fusion Tables demo into the chrome extension",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"https://maps.google.com/"
]
}
However I now get an error in the Console of
"Uncaught Error: Code generation from strings disallowed for this context "
How would I work with the FusionTablesLayer to get what I am looking for into my chrome extension?

There must be some eval() or new Function() used in fusion tables code. This is not allowed by CSP by default. Try one of these suggestions:
AngularJS (a JS framework from google) has something called "CSP mode" in which it does not use eval's. Maybe fusion tables have something similar?
Add unsafe-eval to your CSP as described in docs.

I ended up moving the functional browser action page to the web, and putting an iFrame in the popup.html.

Related

Background subsection required when publishing a translated Google Docs Add-on

I developped a Google Docs add-on with translations, so, instead of using the traditional online deployment process, I need to upload a ZIP file with a json manifest (example below) and files for each locales.
{
"manifest_version": 2,
"name": "__MSG_application_title__",
"short_name": "__MSG_application_title__",
"description": "__MSG_application_description__",
"container": ["GOOGLE_DOCUMENT"],
"default_locale": "en",
"icons": {
"16": "icon.png",
"128": "icon.png"
},
"container_info": {
"container_version": "my_container_version",
"post_install_tip": "my_tip",
"container_id": "my_container_id"
},
"version": "my_version"
}
When uploading such ZIP file, I get the following error message:
An error occurred: Failed to process your item. Please specify
background subsection of app section in the manifest. Legacy packaged
apps cannot be uploaded to the Chrome Web Store any more. More
information can be found at
http://blog.chromium.org/2014/06/migrate-your-legacy-packaged-apps-to.html
I tried to add background subsection from different ways, but none of them was working. Does anyone know how to change the manifest to make it valid please ?
Thanks
Sincerest apologies, I was misunderstanding the issue entirely. Try and see if:
"app":{
"background":{
"scripts":["background.js"]
}
},
Works when added to your code.
similarly, I had to change the app section of my manifest to the following to get it to work when facing this issue:
"app": {
"background": {
"persistent": false
}
}

Chrome Extensions i18n: Redirecting to locale-specific content

Question: How can I redirect users to most-relevant content, sitting in 3 different sub-directories, depending on their preferred language?
What I have
I have created 3 different _locales sub-directories, each containing language-specific messages.json files:
_locales/en/messages.json
_locales/en_GB/messages.json
_locales/de/messages.json
In manifest.json in the root directory, this already works well and as expected to correctly adapt the extension's name and description in the respective language, using:
manifest.json
{
"manifest_version": 2,
"name": "__MSG_extensionName__",
"description": "__MSG_extensionDescription__",
"version": "1.0",
"default_locale": "en",
"browser_action": {
"default_title": "__MSG_extensionName__",
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
Where I am stuck
As the user clicks on my extension's icon, I also want to load language-specific content from the most-relevant sub-directory -- instead of the "default_popup": "popup.html" line -- because some URLs that I link to from the popup.html files also differ by language:
_locales/en/popup.html
_locales/en_GB/popup.html
_locales/de/popup.html
So I thought the best way to do it is to exchange that one line from my root manifest.json that currently reads
"default_popup": "popup.html"
with a line that reads
"default_popup": "__MSG_initialContent__"
and then within each of the _locales sub-directories' messages.json files have
"initialContent": {
"message": "popup.html"
}
so that it reads the content locally from within that subdirectory.
BUT: That is where it all falls apart. Then I get a "This webpage is not found error".
I have tried, to no avail, these differing variations (examples below for _locales/de/messages.json) -- all leading to the same error message:
"initialContent": {
"message": "popup.html"
}
then
"initialContent": {
"message": "_locales/de/popup.html"
}
then
"initialContent": {
"message": "/de/popup.html"
}
and lastly
"initialContent": {
"message": "de/popup.html"
}
What am I doing wrong?
Thanks!
I know this question is very old but I just found it and I guess it would be nice for future visitors to get a solution.
What you need to achieve this are "Predefined messages"
Quote:
Predefined messages
The internationalization system provides a few predefined messages to help you localize. These include ##ui_locale, so you can detect the current UI locale, ...
[...]
The special message ##extension_id can be used in the CSS and JavaScript files, whether or not the extension or app is localized. This message doesn't work in manifest files.
The following table describes each predefined message.
##extension_id
The extension or app ID; you might use this string to construct URLs for resources inside the extension. Even unlocalized extensions can use this message.
Note: You can't use this message in a manifest file.
##ui_locale The current locale; you might use this string to construct locale-specific URLs.
[...]

Create an alert every page load with Chrome extension

This is my first time messing around with extensions and what I am trying to do is very simple yet I can't seem to get it to work.
I simply want an alert to be called every time a page on google is loaded.
In my manifest.json I have:
{
"name": "Bypass shib",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"js": ["secondScript.js"]
}
],
"manifest_version": 2
}
Okay now in my secondScript.js I have:
chrome.tabs.executeScript(null, {code: "alert('test')"});
Shouldn't this execute the alert whenever a page is loaded? If not can somebody explain why it's not?
The console reveals the following message:
Uncaught Error: "executeScript" can only be used in extension processes.
See the content scripts documentation for more details.
This post suggests "Chrome extension functions cannot be used in content scripts," which could be what you're running into.
For completeness, the secondScript.js that worked for me was as follows:
console.log("test");
//chrome.tabs.executeScript(null, {code: "alert('test')"});
alert("test");
Content scripts do not have access to any of the chrome.tabs.* API methods.
To display an alert on every page, remove the chrome.tabs.executeScript method, and let your secondScript.js just contain:
alert('Test');
In a Chrome extension, there are three different kinds of scopes in which JavaScript can run. The understanding of this separation is essential for writing Chrome extensions, see this answer.

"exclude_matches" in manifest.json does nothing?

I'm having a problem controlling what pages my content scripts are injected into. The chrome extension developer guide specifies that I can use an "exclude_matches" directive in my manifest.json to exclude certain pages from injection.
However, this doesn't seem to have any effect. My content script still executes on pages that I have specified as ignored.
I have put the steps to reproduce in a Gist. The code is also available on Github.
Any ideas what I'm doing wrong?
manifest.json
{
"name": "Testing Extension",
"version": "1.0",
"description": "Test the chrome extensions exclude_matches.",
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"exclude_matches": ["http://news.ycombinator.com/"],
"js": ["content.js"]
}]
}
content.js
console.log("hello from the content script");
This is Bug #100106. exclude_matches do not function properly.
To solve the problem, use exclude_globs instead of exclude_matches.
Also, your exclude_matches rule does only match http://news.ycombinator.com/.
Suffice the pattern with an asterisk to match the whole site: http://news.ycombinator.com/*.
See also: Match patterns.

Writing a simple chrome extension

I'm trying to write a simple Chrome extension. I learnt how to write the "hello world" extension that Google put out, but how do I write an extension that will actually do something? Nothing online seems to explain it well. I know it involves HTML and CSS(? ), but what do I do? Say I want to write an extension that will enlarge everything--do I write an HTML file that does this and stick it in my extension folder? And what do I write in the manifest.json file so that it actually uses the HTML file?
Also, I'm a total beginner (I don't know HTML, all I know is a bit of Java) if you couldn't tell from the basic-ness of my questions.
In order to interact with the DOM of the site the user is viewing once the extension is installed you need to use content scripts. Look at the added lines in the manifest here:
http://code.google.com/chrome/extensions/content_scripts.html
Those lines let you indicate what js and css you want to use for the site and also specify what specific domains with 'matches':
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
Files needed:
icon.png ( http://www.mediafire.com/imageview.php?quickkey=37phkkdmd1dv1zf&thumb=4 )
manifest.json
popup.html
Put all in a folder together.
.
in the manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
}
}
put in popup.html:
hello world
Save both files.
go to extentions ( chrome://extensions/ )
And click developer mode. http://snpr.cm/HBuhYF.jpg
Click "load unpacked extention". and locate the folder.
It should load fine.
Click on the new extention and see the glory :)
edit, just read your post - you learned a hello world /facepalm