Currently I have a custom context menu entry Login when I right click on a link.
However, I wonder if there is a possibility to present my custom context menu entry only for specific types of links? Currently my code looks like this:
var context = 'link';
var title = 'Login';
var id = chrome.contextMenus.create({"title": title,
"contexts":[context],
"onclick": login});
function login(e){
var url = e.linkUrl;
url += ((url.indexOf("?")>-1)?"&":"?") + "Login=admin&Password=admin";
window.open(url);
}
I would like to have a context filter so that I could choose to show the entry only if the link has a certain format, e.g. http://.../myspecificurl/....
Basically I need something like:
var context = 'link[href*=/myspecificurl/]';
or a callback upon rendering the context menu.
It's documented as targetUrlPatterns using match patterns.
chrome.contextMenus.create({
"title": title,
"contexts": [context],
"onclick": login,
"targetUrlPatterns": ["http://*.example.com/*"]
});
Related
I've got an API (https://datatank.stad.gent/4/cultuursportvrijetijd/kunstenplan.json)
I have a list of art spot names that I got from that API displayed on a page. (actually different lists each filtered by category)
What I want is when you click on a name, you get more information about that art spot on a separate page. How do I do this?
Here's a snippet of my code that will display a list of museums.
var list_museums='';
var list_galleries='';
var list_centers='';
var list_offspaces='';
var list_search='';
var item_name='';
var item_location='';
var item_site='';
var item_category='';
var item_info='';
for(var i=0;i<this.cultuurUtilities.length;i++)
{
var cultuur=this.cultuurUtilities[i];
var museums = cultuur.categorie=="Museum";
var galleries = cultuur.categorie=="galerie";
var centers = cultuur.categorie=="Centrum voor beeldende kunst";
var offspaces = cultuur.categorie=="Off-Spaces";
console.log("cultuur for loop");
if(museums==true){
list_museums+='<div class="museum-item"><li class="li-museums"><img class="museum-img"></img><div class="museum-link"><a href="detailpagina.html">'+cultuur.Naam;
list_museums+='</a></div></li></div>';
What I want is when you click on a name, you get more information about that art spot on a separate page
I think you mean opening a new window/tab? You can accomplish this in different ways:
1) Adding the "onclick" listener on your clickable element and write the function to be called. Inside it, you can open a new window using the "window.open" function (it opens a new window by default, so you can pass a second parameter to specify the frame where the new window/tab must be handled, because you might wanted to open the page in a new tab, not a new window. Check the docs here). It returns its handle, so you can write into it, just like you do usually in your page.
For example:
var mywindow = window.open("path_to_follow");
// The first parameter is optional. By removing it, it will give you a blank page
mywindow.document.write("<h3>My Selected Museum</h3>");
<< bunch of other instructions >>
2) Using a anchor tag with "href" attribute and the selected item identifier passed as a GET parameter. For example:
<a target="_blank" href="path_to_follow/display_page?museum_id=dinamically_set_id">Click Here to open</a>
In your "display_page" (you can name it as you like) you manage to use some server-side language (like PHP, Java, etc...) to prepare a "stub" of your page, and filling with the selected museum informations, using the museum identifier we said before.
If you need further information, just comment!
I would like to know how to add new elements to a dropdown menu without refreshing the html page. For example, if I have the drop down menu below:
<select>
<option>existing item 1<option>
<option>existing item 2<option>
<option>existing item 3<option>
<option>add new item<option>
</select>
Any time the user selects "add new item", a text box would pop-up asking the user for input. Then whatever string the user types in the text box, I want that to be saved to the drop down menu without refreshing the page. Of course, the "add new item" option will remain unchanged, so the user can repeat this process as many times as he/she wants.
Thanks for your help in advance.
you can do it using jquery..
$("select").append("<option>Another option</option>")
A non JQuery way is to use the standard JavaScript dom api like so:
This piece uses a prompt as a text popout input. If you want to make it pretty you will have to consider an UI framework.
JavaScript :
var select = document.getElementById('select');
var addNewOption = document.getElementById('addNew');
select.onclick= function(){
if (select.value === 'addNew'){
var text = prompt('New Value');
if (text){
var label = text;
var value = text;
var newOption = document.createElement('option');
newOption.innerHTML = label;
newOption.value = value;
select.insertBefore(newOption, addNewOption);
select.value = value;
}
}
};
Demo here:
http://jsbin.com/sufug/2/edit
that is we have opened many tabs.In that tabs i want to search specific tab. Please tell if any ext or option or add-on in chrome or firefox.
Firefox has this functionality built in. If you just start typing in the URL bar and the first character you type is % followed by a space, the rest of what you type will be treated as a search on the titles and urls of open tabs in all Firefox windows.
I'm not sure if this is the site to be asking for help finding extensions that do end user tasks such as this so I'll answer your question explicitly as well as explain how to do it programatically.
The short answer is, yes one extension that will allow you to do this can be found here:
Tab Title Search
The long answer is, in order to find all tabs with a certain name, you need to use the chrome tabs API
I whipped up a short piece of javascript to demonstrate how to have an extension that will create a popup with a search box that you type the desired tab title into. If the tab is found, it will be listed below the search box. If you click on the listing, you will switch to the tab.
// Function to search for tabs
function searchtabs() {
chrome.tabs.query({
title: ""
},
// Callback to process results
function(results) {
// Place holder for the tab to process
var foundTab = null;
// Text to match against
var queryText = document.getElementById("textToSearchInput").value;
// Div to place divs of matched title in
var queryAnswerDiv = document.getElementById("foundTabsDiv");
// Clear the current children
while (queryAnswerDiv.hasChildNodes()) {
queryAnswerDiv.removeChild(queryAnswerDiv.lastChild);
}
// Iterate over all the results
for (var i = 0; i < results.length; i++) {
// Keep track of the tab that is currently being processed
foundTab = results[i];
// If we have a title containing our string...
if (foundTab.title.indexOf(queryText) > -1) {
// Create a new div
var tabDiv = document.createElement("div");
// Set its content to the tabs title
tabDiv.innerHTML = foundTab.title;
// Let it know what the tabs id is
tabDiv.tabToSwitchTo = results[i].id;
// Allow for users to click on the representing div to switch to it
tabDiv.onclick = function() {
// Make the tab selected
chrome.tabs.update(this.tabToSwitchTo, {
selected: true
});
};
// Append the created div to our answer div
queryAnswerDiv.appendChild(tabDiv);
}
}
});
}
document.addEventListener('DOMContentLoaded', function() {
var inputField = document.getElementById("textToSearchInput");
inputField.focus();
inputField.onkeydown = searchtabs;
});
Also, if this is more what you are looking for rather than the extension that I linked, let me know and I can pack this extension.
Edit:
Fixed an error in using the wrong ID to get the input field as well as not getting the first letter of the title (use indexOf() > -1)
An extension that does this is Tab Hero for Chrome ($0.99 Chrome extension). It searches through all of the open tabs (across multiple windows) and offers to switch to the filtered tab. Try and see if it works for you.
I am using onBeforeRequest
chrome.webRequest.onBeforeRequest.addListener(function(object details) {...});
The details return
frameId ( integer )
So I have the frame id, how can I retrieve the element frame from this id and access the src, parentId...?
I'm assuming this is for your background page. You probably don't care about the actual tab but rather want to associate header info with that tabId. To do that, do the following:
1) create tabs container: "tabs = {}"
2) store details in that container: "tabs[details.id].details.push(details);"
That would look something like this:
tabs = {};
init=function(){
...
chrome.webRequest.onBeforeRedirect.addListener(beforeRedirect, requestFilter, extraInfo);
...
}
beforeRedirect = function(details){
...
tabs[details.id].details.push(details);
...
}
You also have the option of chrome.tabs.query to hook into the actual tab. If all you're wanting is to store header info, you probably wouldn't want to use this:
chrome.tabs.query({active:true, windowId: chrome.windows.WINDOW_ID_CURRENT}, function(tab){
var currentTab = tab[0];
...
I am struggling to figure out how to do this with MVC,
I have an entity framework object that has a comma separated list from the db, (can't change the fact that its a horrible csl in the db). I can easily display the list and let them edit it manually. This is rather error prone and would like to split them up and display a list of them in the view. Then allow the user to click a link / button and have them removed from the string and db and the page refreshed to reflect this.
My first thought was to use JQuery to do a ajax json post to do a delete for each item the click an #Html.ActionLink for. I could get it to do the async post back and it would delete the item and would send back a string representing the new string list which I could update the UL with. The second time they clicked a link it would give me a 404, the script I used is:
<script type="text/javascript">
$(document).ready(function () {
$('.viewSeasonsLink').click(function () {
var data =
{
item: $(this).parents('li').first().find('.flagName').text(),
deploymentId: #Model.Id
};
$.post(this.href, data, function (result) {
var list = $("#testme");
list.empty();
var items = result.split(",");
$(items).each(function(index) {
// /* var link = '"' + #Html.ActionLink("Remove", "RemoveItemFromList", "Deployment", null, new { #class = "viewSeasonsLink" }) + '"'; */
var link = '<a class="viewSeasonsLink" href="/SAMSite/Deployment/RemoveItemFromList">Remove</a>';
list.append('<li><span class="flagName">' + items[index] + '</span> - ' + link + ' </li>');
/* list.append('<li><span class="flagName">' + items[index] + '</span> - ' + '\'' + #Html.ActionLink("Remove", "RemoveItemFromList", "Deployment", null, new { #class = "viewSeasonsLink" }) + '\'</li>'); */
});
}, "json");
return false;
});
});
</script>
I could not get the action link to work with the jquery script, so tried hard coding it, still not success.
I then thought I would just try and do a simple actionlink back to a method to remove it and return the normal view, again this posts and will update the db, but will not refresh the webpage at all.
<ul id="testme2">
#foreach (string flag in ViewBag.FeatureFlags)
{
<li><span class="flagName">#flag</span> - #Html.ActionLink("Remove", "RemoveItemFromListTest", "Deployment", null, new { #class = "viewSeasonsLink" })</li>
}
</ul>
public ActionResult RemoveItemFromListTest(string item, int deploymentId)
{
Deployment deployment = db.Deployments.Single(d => d.Id == deploymentId);
ViewBag.CustomerId = new SelectList(db.Customers, "Id", "Name", deployment.CustomerId);
List<string> featureFlags = deployment.FeatureFlags.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries).ToList();
featureFlags.Remove(item);
deployment.FeatureFlags = ConvertBackToCommaList(featureFlags);
ViewBag.FeatureFlags = featureFlags;
//db.SaveChanges();
return View("Edit", deployment);
}
EDIT
released I was being a bit daft at one point:
The second test to get it to do a full post back and do the update was still getting caught by the jquery, (also was not passing in the values). I changed the line to this:
<li><span class="flagName">#flag</span> - #Html.ActionLink("Remove", "RemoveItemFromListTest", "Deployment", new { item = #flag, deploymentId = Model.Id }, null)</li>
which does work, but is a bit naff, it would mean any changes made to the form before the remove link clicked would be lost.
I think I see two issues. One is the initial .Post on the viewSeasonsList click event. You are posting back to the Action that loaded the page, not the Action that will handle the delete. I doesn't seem to me that they would be the same Action base on the approach you described.
var url = '/SAMSite/Deployment/RemoveItemFromList';
then
$.post(url, data, function (result) {
Second, in the Ajax response, when you are rebuilding the list, you are including an href attribute for the links. Why? you are not navigating with those links, you are initiating an Ajax request, which has already been set up.
var link = '<a class="viewSeasonsLink">Remove</a>';
ultimately I had one main problem with the jquery solution. When I added a new LI element it was not being hooked up to the ajax call as this was just happening at document.ready. I now replaced the simple .click with a delegate that will also hook up all elements that are added after the ready event, credit to this page for help with it:
$('#featureflaglist').delegate('.removeflaglink', 'click', RemoveFlagFromList);