Create two child menus for every parent menu in chrome extension - google-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"]});

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 Extension context menu, differentiate image and link event

In my chrome extension I'm adding two context items "Get link" and "Get Image". The main difference being when setting them both up they have the "context" of link and image respectively. But when right clicking on an image that is acting as a link you get the option of both:
when either of those are clicked the data that comes into the listener seems to be identical, I need to be able to differentiate the two to know if the context is that of an image or a link to handle them differently. Here is my code:
chrome.runtime.onInstalled.addListener(function() {
var context = "image";
var title = "Copy Image";
var id = chrome.contextMenus.create({"title": title, "contexts":[context],
"id": "context" + context});
});
chrome.runtime.onInstalled.addListener(function() {
var context = "link";
var title = "Copy link";
var id = chrome.contextMenus.create({"title": title, "contexts":[context],
"id": "context" + context});
});
chrome.contextMenus.onClicked.addListener(onClickHandler);
function onClickHandler(info, tab) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id, {action: "imageAdded", subject: info.srcUrl}, function(response) {
});
If you want know which menu item was clicked, you can get the id value of the clicked context menu item in the menuItemId property of the object passed into the onClicked handler:
function onClickHandler(info, tab) {
console.log(info.menuItemId);
//...
}
Take a look at Parameter of onClicked callback, you could differentiate the image/link via mediaType
One of 'image', 'video', or 'audio' if the context menu was activated on one of these types of elements.

Need to get the values of the objects (JSON) which have been created dynamically

How to get the top object value in PentahoDI? I have got the other elements like Category, Subcategory, section from the following example of Json file. However, I need to capture the first root object which is x#chapter#e50de0196d77495d9b50fc05567b4a4b and x#e50de0196d77495d9b50fc05567b4a4b
{
"x#chapter#e50de0196d77495d9b50fc05567b4a4b": {
"Category": "chapter",
"SubCategory": [
"x#4eb9072cf36f4d6fa1e98717e6bb54f7",
"x#d85849fbde324690b6067f3b18c4258d",
"x#3edff1a1864f41fe8b212df2bc96bf13"
],
"Section": {
"display_name": "Week 1 Section"
}
},
"x#e50de0196d77495d9b50fc05567b4a4b": {
"category": "course",
"Subcategory": [
"x#e50de0196d77495d9b50fc05567b4a4b"
],
"Section": {
"advanced_modules": [
"google-document"
],
}
}
}
In the Fields tab of the Json Input step I have given the Names and Paths as: Category --> $..Category, Subcategory --> $..Subcategory, Section --> $..Section.
However, I am unable to get the root element as it is crucial information for us to work on it. ex (x#chapter#e50de0196d77495d9b50fc05567b4a4b and x#e50de0196d77495d9b50fc05567b4a4b)
I have used the following code to get the values of the dynamic objects but it didnt work. The following is the code I used it.
var obj = JSON.parse (JBlock) //Jblock is the one which holds the entire string.
var keys = Object.name( obj);
JSONPath is not able to get the keys of a JSON structure. This is one of my main issues with JSONPath, and I wish Pentaho had included other JSON parsing engines.
This JavaScript to be used in Modified Java Script Value works for me. Add a value in the fields editor like this:
And then a script like this:
var obj = JSON.parse(JBlock);
var keys = Object.keys(obj);
for (var i = 0; i < keys.length; i++) {
    var row = createRowCopy(getOutputRowMeta().size());
    var idx = getInputRowMeta().size();
row[idx++] = keys[i];
putRow(row);
}
trans_Status = SKIP_TRANSFORMATION;

content script in 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

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'>");

Resources