content script in chrome extension - google-chrome-extension

i have to add div in google search page through chrome extension
my inject.js file is as follow:
var body=document.getElementById("search");
//creates bar and creates bar removal function
var bar = document.createElement("DIV");
function removeBar(){
bar.remove();
}
//styles bar
var ds = bar.style;
ds.position = "fixed";
ds.width = "512px";
ds.height = "33px";
ds.background = "rgba(0,0,0,0.86)";
ds.zIndex = "9999999999999";
//creates X button and makes it so clicking it runs the removeBar() function
var x = document.createElement("BUTTON");
x.onclick = removeBar;
bar.appendChild(x);
//styles button
var xs = x.style;
xs.background = "black";
xs.borderColor = "black";
xs.color = "rgba(255,255,255,.86)";
xs.position = "fixed";
xs.left = "100%";
xs.marginTop = "5px";
xs.marginLeft = "-29px"
//puts X in button
var xtext = document.createTextNode("X");
x.appendChild(xtext);
//puts bar in page
body.insertBefore(bar, body.children[0]);
and my manifest.json is as follow:
{
"manifest_version": 2,
"name": "Inject script in webpage",
"version": "2.0.1",
"description": "inject script in webpage.",
"icons": {
"48" : "sample-48.png",
"128" : "sample-128.png"
},
"content_scripts": [
{
"matches": ["https://www.google.com.pk/*"],
"js" : ["inject.js"],
"all_frames": true
}
]
}
but when i load google SERP page, error message shows somewhat like " cannot call "insertBefore" property of null", it seems that variable "body" is undefined. by inspect element of google page i checked that DIV with ID "search" is present if i am doing it wrong then plzz let me know i am novice in chrome extension development

The problem is probably here:
var body=document.getElementById("search");
the "body" variable is null - probably because the id you're looking for doesn't exist. Try looking for some other id (I used "gbqfb"). But rather than feeding you the answer here, what you should really do is learn to use Chrome's built-in debugger to find out why your code isn't working. Have a look at this youtube video:
https://www.youtube.com/watch?v=htZAU7FM7GI

Related

How to put selection text in chrome.contextMenus?

How can I add selection text in context.Menus?
I want to create a Chrome extension which will work similarly to the right-click search function in Google Chrome (i.e. right click on selected text -> "Search 'selection text')
I made a preview
I assume this is something with chrome.contextMenus.update but i don't know how to make it work
background.js:
chrome.runtime.onInstalled.addListener(function () {
var context = "selection";
var title = "Search";
var id = chrome.contextMenus.create({
"title": title,
"contexts": [context],
"id": "context" + context
});
});
// add click event
chrome.contextMenus.onClicked.addListener(onClickHandler);
// The onClicked callback function.
function onClickHandler(info, tab) {
var sText = info.selectionText;
var url = "https://www.google.com/search?source=hp&q=" + encodeURIComponent(sText);
window.open(url, '_blank');
};

chrome.i18n.getMessage is always empty

I'm trying to enable i18n to a little chrome extension that I'm working on.
As of now, I only need to translate some strings in the html file. I know that the i18n functionality cannot do that directly, so I wrote my own localization function:
var $objects = $('*[data-message]');
$objects.each(function() {
var $this = $(this);
var messageName = $this.attr('data-message');
var text = $this.html();
var translated = chrome.i18n.getMessage(messageName);
if (translated !== '' && translated !== undefined) {
$this.html(translated);
}
console.log(messageName); // this prints "theTitle"
console.log(translated); // this prints ""
});
This is a string that I have in my html file:
<span data-message="theTitle">Live Quotes Portfolio</span>
And this is my _locales/it/messages.json file:
{
"theTitle": {
"message": "Il titolo",
"description": "The string we search for.."
}
}
The problem is that in the two console logs, the first one prints the correct string that needs to be translated, but the second is always empty.
What am I missing? I also have "default_locale": "it" in my manifest.json...

Sharepoint 2013: Inserting image on page javascript csom

I create a new page with javascript csom. I am able to give it a title, byline, content etc., but it won't accept an image reference. It doesn't give me any error messages, nor reaching my error function, but I'm obviously missing something here as the new page does not have any images attached.
Any ideas on how to do this?
Here is my code:
var pageInfo = new SP.Publishing.PublishingPageInformation();
var newPage = pubWeb.addPublishingPage(pageInfo);
context.load(newPage);
context.executeQueryAsync(function () {
var listItem = newPage.get_listItem();
context.load(listItem);
context.executeQueryAsync(function () {
var title = $('#head').val();
listItem.set_item('Title', title);
listItem.set_item('PublishingPageImage', { "Url": "/sites/intranett/PublishingImages/ExampleImage.png", "Description": "testing" });
listItem.update();
context.executeQueryAsync(function () { }, onFailedCallback);
}, onFailedCallback);
}, onFailedCallback);
I needed to include the html image tag when setting the PublishingPageImage property.
listItem.set_item('PublishingPageImage', "<img alt='image' src='/sites/intranett/PublishingImages/ExampleImage'>");

Create two child menus for every parent menu in chrome extension

I've searched for this but no luck. I want to create two child menus for every parent menu in Google Chrome extension. But the code I have yet only creates child menus when the context is "page".
Here's the code I'm currently trying:
var contexts = ["page","link","image"];
for (var i = 0; i < contexts.length; i++) {
var context = contexts[i];
var title = "";
title = "Do something with this "+context;
var id = chrome.contextMenus.create({"title": title, "contexts":[context]});
var child1 = chrome.contextMenus.create({"title": "someThing1", "parentId": id, "onclick": onClickFunc});
var child2 = chrome.contextMenus.create({"title": "someThing2", "parentId": id, "onclick": onClickFunc});
}
Any idea??
Pretty sure this is answered over here: https://stackoverflow.com/a/18198476/1678601
In short, the create method has an optional param called 'contexts' which defaults to 'page' only.
Here's the doc: http://developer.chrome.com/extensions/contextMenus.html#method-create
So, to demonstrate how to apply the solution to your code (this is only a partial from above):
var child1 = chrome.contextMenus.create({"title": "someThing1", "parentId": id, "onclick": onClickFunc, "contexts": ["page","link","image"]});
var child2 = chrome.contextMenus.create({"title": "someThing2", "parentId": id, "onclick": onClickFunc, "contexts": ["page","link","image"]});

Applying google plus one src to iframe in chrome extension

I've been working on a chrome extension just for a bit of fun and trying to learn a bit more javascript to add the +1 button to Google Buzz posts.
I think I'm running into the "Unsafe JavaScript attempt to access frame with URL" error / Cross domain issue. That's according to my chrome console log.
My code is as follows:
function addGJS() {
var po = document.createElement('script'); po.type = 'text/javascript';
po.src = 'https://apis.google.com/js/plusone.js';
po.innerHTML = '{"parsetags": "explicit"}';
jQuery(po).load (function() {
var items;
var startInt = setInterval(function() {
items = $("#canvas_frame").contents().find('.nH.h7.HY.aW');
if (items.length > 0) { clearInterval(startInt); main(items); }
}, 1000);
});
var insert;
var poInt = setInterval(function() {
insert = document.getElementById("canvas_frame");
if (insert != null) { insert.contentDocument.body.appendChild(po); clearInterval(poInt) }
}, 1000);
}
The main content of google buzz appears in the iframe "canvas_frame" so I attempted to add the plus-one src to that. I've had a good search and can't find any definitive answers. I tried to change the type of the iframe to content. I also read about postMessage but not sure if that is possible in this context?
or am I just screwed? :)
Cheers,
UPDATE:
manifest.json (description and icons i've taken out):
"content_scripts": [
{
"js": [ "scripts/jquery.js", "scripts/plusone.js", "user_scripts/buzzplusone.js" ],
"matches": [ "*://*.google.com/*/#buzz", "*://google.com/*/#buzz", "https://mail.google.com/*" ],
"run_at": "document_end"
}],
"permissions": [ "https://mail.google.com/*", "https://plus.google.com/*" ],
Also the console.log errors i'm seeing now are:
Uncaught CustomError: Error in protected function: SYNTAX_ERR: DOM Exception 12
googleapis.client__plusone.js:27
Uncaught TypeError: Cannot read property 'src' of null
Unsafe JavaScript attempt to access frame with URL
https://mail.google.com/mail/#buzz from frame with URL /apps-static//js/nw/nw_i/rt=h/ver=H-Y4RtFct_c.en./am=!oHhtMCRDHb3v-YjahgnJviPf2CNHgPs1tsZl/d=1/">https://plus.google.com//apps-static//js/nw/nw_i/rt=h/ver=H-Y4RtFct_c.en./am=!oHhtMCRDHb3v-YjahgnJviPf2CNHgPs1tsZl/d=1/. Domains, protocols and ports must match

Resources