In my example I want to make extension for easy redirection for subreddits at reddit.com. This is what I have so far. However I would like to autocomplete from my history in omnibox, like those google search suggestions. For example if I type te to autocomplete tech inline and add suggestion underneath for technology and whatnot I have in my history that starts with "te". Is this even possible? If so can you point me in the right direction?
This is my very simple code so far
function navigate(url) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.update(tabs[0].id, {url: url});
});
}
chrome.omnibox.onInputEntered.addListener(
function(text) {
if(text.indexOf(' ') == -1) {
if(text.indexOf('/r/') == 0) {
navigate("https://www.reddit.com" + text); }
else if(text.indexOf('r/') == 0) {
navigate("https://www.reddit.com/" + text); }
else
navigate("https://www.reddit.com/r/" + text);
}
});
Related
I use yii2 as a backend framework, I want to make tour for my app, but bootstrap tour popover not shown on the second page, I create an asset bundle for bootstrap tour and register it in the layout, bootstrap tour work correctly on the first page but when going to another page it make problem and in debug on the next page show:
Bootstrap Tour 'tour' | Redirect to paper/upload
Bootstrap Tour 'tour' | Error redirection loop to paper/upload
I already check window local storage in the developer tool of the chrome and see it is on the correct step when going to second-page window local storage was shown:
tour_current_step value 2,
and another question, how I should set value for path option in the bootstrap tour for yii2 router, is my paths correct? for example first step is on the main page of the site is: "", is it correct, I would like if someone clicks on the previous button of popover return back to the previous step.
here is my javascript code, I register this javascript code in the layout file:
$(function() {
var $demo, duration, remaining, tour;
$demo = $("#demo");
duration = 5000;
remaining = duration;
tour = new Tour({
onStart: function() {
return $demo.addClass("disabled", true);
},
onEnd: function() {
return $demo.removeClass("disabled", true);
},
debug: true,
steps: [
{
path: "",
element: "#demo",
placement: "bottom",
title: "Welcome to Bootstrap Tour!",
content: "Introduce new users to your product by walking them through it step by step."
}, {
path: "",
element: "#Wordcounter",
placement: "bottom",
title: "Step One",
content: "For translation click on word counter menu item"
}, {
path: "paper/upload",
element: "#myDropzone",
placement: "top",
title: "Step two",
content: "Drag and Drop your file here or click to upload plz wate to complete upload"
}
,
{
path: "paper/upload",
element: "#next",
placement: "bottom",
title: "Step three",
content: "then Click on the Next Bottom",
reflex: true
}, {
path: "paper/show",
element: "#save",
placement: "top",
title: "Step four",
content: "click on save and continue and choose language plan",
duration: 5000
}
]
}).init();
if (tour.ended()) {
$('<div class="alert alert-info alert-dismissable"><button class="close" data-dismiss="alert" aria-hidden="true">×</button>You ended the demo tour. <a href="#" data-demo>Restart the demo tour.</a></div>').prependTo(".content").alert();
}
$(document).on("click", "[data-demo]", function(e) {
e.preventDefault();
if ($(this).hasClass("disabled")) {
return;
}
tour.restart();
return $(".alert").alert("close");
});
});
I make a lot of work on the code and finally find an answer, the problem was on the paths, I used pretty URL in the URL manager, and the bootstrap tour need relation paths, if path in the current page not same as the path in the step of bootstrap tour, it's going to on redirect loop, and this is because there is no way the bootstrap tour can find, does it need to redirect or no, this is the short code of bootstrap tour where go to redirect loop
if (step.redirect && this._isRedirect(step.host, path, document.location)) {
this._redirect(step, i, path);
if (!this._isJustPathHashDifferent(step.host, path, document.location)) {
return;
}
}
for solving this issue when paths should get from the router (for example in frameworks like Yii, Laravel, Symfony and ...) the bootstrap tour suggest to use the onNext attribute in the step and redirect to an address.
but in my case, I change the source code of bootstrap tour to find my answer in better form and replace the above code with this code:
var current_url = document.URL;
var result = current_url.includes(path);
if(!result){
this._redirect(step, i, path);
if (!this._isJustPathHashDifferent(step.host, path, document.location)) {
return;
}
}
and change the redirect code to this:
Tour.prototype._redirect = function(step, i, path) {
var href;
if ($.isFunction(step.redirect)) {
return step.redirect.call(this, path);
} else {
href = this._options.domainAddress + path;
// href = {}.toString.call(step.host) === '[object String]' ? "" + step.host + path : path;
this._debug("Redirect to: " + href);
if (this._getState('redirect_to') === ("" + i)) {
this._debug("Error redirection loop to " + path);
this._removeState('redirect_to');
if (step.onRedirectError != null) {
return step.onRedirectError(this);
}
} else {
this._setState('redirect_to', "" + i);
return document.location.href = href;
}
}
};
and define a global variable in options, domainAddress,
but i think it is not a good way to change the source code of bootstrap tour, but it is work for my case.
I am using auto-complete web service sing JSON, If i am selecting a list item that must not be appear again in auto-complete list;
JSON AJAX code:
select: function (event, ui) {
var terms = split(this.value);
if (terms.length <= 10) {
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
else {
var last = terms.pop();
$(this).val(this.value.substr(0, this.value.length - last.length - 0)); // removes text from input
$(this).effect("highlight", {}, 1000);
$(this).addClass("red");
$("#warnings").html("<span style='color:red;'>Max skill reached</span>");
return false;
}
}
I am attaching screenshot also, please see here :
Like #Bindred mentioned in the comments to your question, an easier solution would be to use the Select2 jQuery library. It is not exactly what you are looking for, but as far as UX goes I think it would achieve a similar goal, and it is a breeze to get working.
I have added an example for you to use: https://jsfiddle.net/9cqc5876/9/
HTML
<select id="txtExpertise" multiple="multiple"></select>
JavaSript
$(document).ready(function() {
$("#txtExpertise").prop("disabled", "disabled");
// do your ajax request for data
//$.getJSON("../WebServices/WebServiceSkills.asmx/GetAutoCompleteData", function(data) {
// fake json data
var data = {"languages": ["Java", "C", "C++", "PHP", "Visual Basic",
"Python", "C#", "JavaScript", "Perl", "Ruby"]};
// populate the select
$.each(data.languages, function(key, val) {
$('#txtExpertise')
.append($("<option></option>")
.attr("value", key)
.text(val));
});
// activate the select2
$("#txtExpertise").select2();
$("#txtExpertise").prop("disabled", false);
//});
});
I cannot believe I am still have basic programming problems... I know the basics, but still have a hard time implementing the logic I think of. Anyways
I am building this basic Chrome Extension that has one JavaScript file and it does work! The only issue is that once I click the icon it is forever on, that is until I remove it. I want to add a basic toggle functionality, but I am having difficulty getting a working prototype. Here is a couple of my ideas:
var toggle == 1; // or true, i.e. clicked
if (functionName() == 1) {
function functionName() {
Do whatever it is when clicked;
blah blah blah;
} else if (functionName() == 0) {
Turn off;
} else {};
}
switch(toggle)
{
case 1:
Do whatever it is when clicked;
blah blah blah;
break;
case 2:
Turn off;
break;
default:
error;
break;
}
If both if statement and switch statement had a different order, say case 1 and 2 were swapped, I do not think it would be a difference. I do not think a switch statement would be the best way because there is no more than two options, on or off.
What about a while loop to change the conditions of the extension? I do know the modulo operator, and code could be written like:
1 % 2 = False,
2 % 2 = True,
3 % 2 = False, etc
Then a basic if-statement could work....
something like:
var i = 1;
while (i % 2 == 1) {
Do whatever it is when clicked;
blah blah blah;
i++;
}
Does anybody have an idea of the best way to do this? I have played with the jQuery .toggle() event, but I do not think this would make since. I have nothing in the html document and only a JavaScript file. It makes no since loading the library and then using the jQuery selector$("chrome.browserAction.onClicked.addListener(function)") when simple JavaScript can be used. Plus I do not even know if that would be the right selector...
Any help would be great, thanks in advance.
For the record I found the sample extensions useless when it comes to something that should not be complicated.
Thanks!
UPDATE code with my function in background.js:
function trigger() {
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.windows.onFocusChanged.addListener(function(windowId) {
if (windowId != chrome.windows.WINDOW_ID_NONE) {
chrome.tabs.query({ active:true, windowId:windowId }, function(tabs) {
if (tabs.length == 1) {
var tab = tabs[0];
chrome.tabs.reload(tab.id);
}
});
}
});
});
}
var functionOn = false;
chrome.browserAction.onClicked.addListener(function() {
if (functionOn === false) {
document.addEventListener('DOMContentLoaded', function() {
trigger();
});
functionOn = true;
} else if (functionOn === true) {
document.addEventListener('DOMContentLoaded', function() {
//nothing...
});
functionOn = false;
}
The if statement does not work at the moment, my exstension works with this call instead of the if statement at the end:
document.addEventListener('DOMContentLoaded', function() {
trigger();
});
It's hard to give you a super detailed answer without knowing exactly what is supposed to be toggled, but in a nutshell you just need to add something like this to your background script:
var functionOn = false;
chrome.browserAction.onClicked.addListener(function() {
if (functionOn === false) {
doSomething();
functionOn = true;
} else {
functionOn = false;
// Don't do anything.
}
});
By putting the variable "functionOn" in the background page the state is persistent. You may already be aware of this, but to create a background script you simply add this to the manifest file:
"background": {
"scripts": ["background.js"]
},
It's hard to tell what you're trying to do with the toggle, but the doSomething() would basically be whatever action you're trying to perform, whether it's injecting code via a content script or showing a popup, etc.
I have a strange issue with my jquery mobile application. Below screen shot from Chrome Developer Tools Snapshot.
Why does my Pages or Scripts are cached even thiugh Have added
$.ajaxSetup ({
cache: false
});
Also in every ajax call which loads my ul > li have set cache:false.
Kindly let me know how can I overcome this scenario coz of this my Mobile cache is growing on every single click driving me nuts.
Thanks
Update :
Every time I click to navigate to another page this scripts get executed :
$('body').on('click', '.menuClass', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
var menuid = $(this).attr('id');
if (menuid == '100001') {
settings.get('setval', function(obj) {
if(obj.value.tableMode == "1"){
$.mobile.changePage('categories.html', {
transition : "slide"
});
return false;
}
else{
$.mobile.changePage('index.html', {
transition : "slide"
});
}
});
}
});
But for somereasons the URL for categories.html loads on every click changing the url to
below
http://localhost:8080/categories?_=1347279588477
http://localhost:8080/categories?_=1347279584203
http://localhost:8080/categories?_=1347279688227
I don't know why cache:false doesn't work but i'm adding a time created string to prevent caching of ajax pages.
Doing this by adding &ts="+ new Date().getTime() to end of url .
Here is my usage ;
$.ajax({
type: "GET",
url: "ajax.php?ajax_file=ajax_table_page&ts="+ new Date().getTime(),
success: function(data){
..................
}
});
I also use this to trace ajax errors (you may add after document is ready )
$.ajaxSetup({
error:function(x,e){
if(x.status==0){
alert('You are offline!!\n Please Check Your Network.');
}else if(x.status==404){
alert('Requested URL not found.');
}else if(x.status==500){
alert('Internel Server Error.');
}else if(e=='parsererror'){
alert('Error.\nParsing JSON Request failed.');
}else if(e=='timeout'){
alert('Request Time out.');
}else {
alert('Unknow Error.\n'+x.responseText);
}
}
});
I wrote code in which .getJSON api from jquery is used to fetch images from flickr public api. Please see this link. I have made each of the images to slide after each request gets finished. Now, I want the first set of image to slide downward and then following sets to slide up first and then replaced by images from ajax request maintaining the same animation as used for the first set of images. I think a very little modification is enough. I thank you for your comment and suggestion before hand.
Is this what you had in mind?
getFlickr();
setInterval(getFlickr, 20000);
function getFlickr() {
$.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?', {
'format': 'json'
}, function(data) {
if ($('p').length < 1) {
addPiecePiece('#main',true,null);
}
else {
$('.flickr').each(function(i) {
$(this).delay(4000*i).slideUp(2000,function(){
addPiecePiece($(this),false,i);
$(this).remove();
});
});
}
function addPiecePiece(element,aoa,index) {
$.each(data.items, function(key, value) {
if(index == null || index == key){
title = value.title;
description = value.description;
photo = value.media.m;
html = $('<p class="flickr"></p>').html(description).css({
'display': 'none'
});
if(aoa == true){
$(html).appendTo(element).slideDown(2000);
}else{
$(html).insertAfter(element).slideDown(2000);
}
}
});
}
})
}