Am trying to create an extension that fill each input field(text,search,...) in any webpage with an icon when I click on it a drop down menu appears,
Just like Lazarus from recovery icon or the google search by voice icon,
I tried so many ways lately but nothing worked will :(
Am trying to find a way that is suitable for all fields whatever their shape or size
document.addEventListener('DOMContentLoaded', function () {
$(document).ready(function () {
var elements = $('input[type=text], input[type=search], input[type=textarea]');
for (var i = 0; i < elements.length; i++) {
var input = elements[i];
input.className = 'inputWithImge';
var oImg = document.createElement('img');
oImg.src = chrome.extension.getURL("list.png");
oImg.className = 'img';
}
$(document).ready(function () {
$(".inputWithImge").after(oImg);
$(".inputWithImge").each(function () {
$(this).add($(this).next()).wrapAll('<divclass="imageInputWrapper"></div>');
});
});
});
});
Related
am calling a Post method of my page model on button click using "asp-page-handler", after execution am returning the page(return Page()) which reloads the page and the focus is automatically set to top of the page.Here I want to set focus to button I clicked. Is there any possibilities to do this.
Thanks in advance
If the url of the Post handler is https://localhost:44360/Contact?handler=Test, then the blow script will focus the related button:
#section scripts{
<script type="text/javascript">
$(document).ready(function () {
$(function () {
var id = 'a[href!="' + getUrlParameter('handler') + '"]';
//$('a[href!="Test"]').focus();
$(id).focus();
});
});
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
};
</script>
}
Im using NodeJS with socket.io and socketio-file-upload to upload multiple files, it works great! However I'm having an issue where I'm trying to save the name attribute of the input these files come to save them into my DB.
When I upload 1 or more files, I can't seem to access the input field name or something that shows me which of the files come from which input field.
Here is my front:
var uploader = new SocketIOFileUpload(socket);
var array_files_lvl_3 = [
document.getElementById("l3_id_front"),
document.getElementById("l3_id_back"),
document.getElementById("l3_address_proof_1"),
document.getElementById("l3_address_proof_2"),
document.getElementById("l3_passport")
];
uploader.listenOnArraySubmit(document.getElementById("save_level_3"), array_files_lvl_3);
And here is my back:
var uploader = new siofu();
uploader.dir = "uploads/userL3";
uploader.listen(socket);
uploader.on('saved', function(evnt){
console.log(evnt);
//this "event" variable has a lot of information
//but none of it tells me the input name where it came from.
});
This is what the "evnt" variable holds:
Unfortunately the library doesn't send that information. So there is nothing existing config you can do. So this needs code modification.
client.js:374
var _fileSelectCallback = function (event) {
var files = event.target.files || event.dataTransfer.files;
event.preventDefault();
var source = event.target;
_baseFileSelectCallback(files, source);
client.js:343
var _baseFileSelectCallback = function (files, source) {
if (files.length === 0) return;
// Ensure existence of meta property on each file
for (var i = 0; i < files.length; i++) {
if (source) {
if (!files[i].meta) files[i].meta = {
sourceElementId: source.id || "",
sourceElementName: source.name || ""
};
} else {
if (!files[i].meta) files[i].meta = {};
}
}
After these changes I am able to get the details in event.file.meta
I'm the author of socketio-file-upload.
It looks like the specific input field is not currently being recorded, but this would not be a hard feature to add. Someone opened a new issue and left a backpointer to this SO question.
A workaround would be to directly use submitFiles instead of listenOnArraySubmit. Something like this might work (untested):
// add a manual listener on your submit button
document.getElementById("save_level_3").addEventListener("click", () => {
let index = 0;
for (let element of array_files_lvl_3) {
let files = element.files;
for (let file of files) {
file.meta = { index };
}
uploader.submitFiles(files);
index++;
}
});
I tell you what I want to do. I am doing a scraping of tematika.com site to be able to create a base of books to me. The problem is that I need to go from page to page but I can not, so I always get the same books. I think with the code they will understand it better.
const phantom = require("phantom");
const cheerio = require("cheerio");
let _instance, _page;
let _books = [];
phantom.create().then(instance => {
_instance = instance;
return _instance.createPage();
}).then(page => {
_page = page;
return _page.open('http://www.tematika.com/catalogo/libros/arte__arquitectura_y_diseno--9.htm');
}).then(status => {
console.log(status);
return _page.property('content')
}).then(html => {
// I transform the html into an object to manipulate it with cheerio
let $ = cheerio.load(html);
//I get all the books and pass them to an array to go through them and extract the info I'm looking for
let books = $('.Gcentro').find('.moduleproductob').toArray();
//As always there are 10 pages I make a for it it itere 10 times
for(let i=0;i<10;i++){
books.forEach(book => {
let _book = {};
_book.imageMin = $(book).find('.Gimagesproductos').attr('src');
_book.linkBook = $(book).find('.FProductos').attr('href');
_books.push(_book);
});
//In this part what I look for is to click on the next button on the page and it is what is not working for me
//What ends up happening is that it never goes back to the page. So always bring me the info of the same 10 books.
_page.evaluate(function() {
var evObj = document.createEvent('Events');
evObj.initEvent('click', true, false);
document.getElementById('catalogNext').dispatchEvent(evObj);
});
}
console.log(_books);
_page.close();
_instance.exit();
}).catch(e => console.log(e));
What I need is to be able to click on next and be able to bring me the books that are showing. If it is not with phantom-node and cheerio can be with another tool, all I need is that it works on node.
Thank you! :)
Modifying CKEditor 3.6.2 is not easy, but I tried hard. One problem that is still open is the following:
In config.js we have:
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if(dialogName == 'image') {
dialogDefinition.onShow = function () {
var dialog = CKEDITOR.dialog.getCurrent();
var elem = dialog.getContentElement('info','htmlPreview');
elem.getElement().hide();
// and more stuff to do...
};
}
});
After the editor is loaded, and the user has uploaded an image, the following javascript error is thrown:
Error: C.preview is undefined
Source File: wysiwyg-editor/plugins/image/dialogs/image.js?t=B8DJ5M3
Line: 8
dialogDefinition.onShow seems to cause this error, as removing all elements from the code, and only calling onShow brings up the error. Using onLoad does work!
Using onShow on other dialogs is working fine, only the image dialog is not working as it should.
Btw, I asked in the CKEditor forum but nobody answered.
Stumbled across this when I was looking for a resolution. Figured I'd post what I ultimately did to solve it, albeit not 100% ideal.
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var tab, field, name = ev.data.name,
definition = ev.data.definition;
if( name == 'image' )
{
tab = definition.getContents( 'info' );
field = tab.get( 'htmlPreview' );
field.style = 'display: none';
}
});
This makes the preview window available for processing, just hides it from the dialog window.
Use CKEDITOR.tools.setTimeout() like this:
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
var dialog = dialogDefinition.dialog;
if (dialogName == 'image2') {
dialogDefinition.onShow = CKEDITOR.tools.override(dialogDefinition.onShow, function(original) {
return function() {
original.call(this);
CKEDITOR.tools.setTimeout( function() {
if (dialog.getContentElement('info', 'src').getValue() == '') {
dialog.selectPage('Upload');
}
}, 0);
}
});
}
});
I have written an extension for google chrome and I have a bug I need a help solving.
what I do is using either a text selection or an input of text search for photos on flickr and then create a results tab.
The extension works most of the times. but sometimes it creates a blank tab with no results and when I repeat the same search it then shows results. I figured that it's something to do with the html files messaging maybe something to do with them communicating. I have to say that I always receive the results from flickr so that the request/responce with flickr works ok. Sometimes the error happens when I play with other tabs or do something on other tabs while waiting for results. can you please help me figure out where's the fault?
the background file:
function searchSelection(info,tab){
var updated;
if(info.selectionText==null){
var value = prompt("Search Flickr", "Type in the value to search");
updated=makeNewString(value);
}
else{
updated=makeNewString(info.selectionText);
}
var resultHtml;
var xhReq = new XMLHttpRequest();
xhReq.open(
"GET",
"http://api.flickr.com/services/rest/?method=flickr.photos.search&text="+updated+
"&api_key=a0a60c4e0ed00af8d70800b0987cae70&content_type=7&sort=relevance&per_page=500",
true);
xhReq.onreadystatechange = function () {
if (xhReq.readyState == 4) {
if (xhReq.status == 200) {
chrome.tabs.executeScript(tab.id, {code:"document.body.style.cursor='auto';"});
var photos = xhReq.responseXML.getElementsByTagName("photo");
if(photos.length==0){
alert("No results found for this selection");
chrome.tabs.executeScript(tab.id, {code:"document.body.style.cursor='auto';"});
return;
}
var myJSPhotos=[];
for(var i=0; i<photos.length; i++){
var data={"id":photos[i].getAttribute("id"),"owner":photos[i].getAttribute("owner"),
"secret":photos[i].getAttribute("secret"),"server":photos[i].getAttribute("server"),
"farm":photos[i].getAttribute("farm"),"title":photos[i].getAttribute("title")};
myJSPhotos[i]=data;
}
chrome.tabs.create({"url":"results.html"},function(thistab){
var port= chrome.tabs.connect(thistab.id);
port.postMessage({photos:myJSPhotos});
});
}
};
};
xhReq.send(null);
chrome.tabs.executeScript(tab.id, {code:"document.body.style.cursor='wait';"});
}
var context="selection";
var id = chrome.contextMenus.create({"title": "search Flickr", "contexts":[context,'page'],"onclick":searchSelection});
results html: has only a reference to the js file res.js
res.js :
chrome.extension.onConnect.addListener(function(port) {
port.onMessage.addListener(function(msg) {
//*****//
var photos=msg.photos;
createPage(photos);
});
});
I have to mention that when the tab is empty if I put alert on the //*****// part it won't
fire.
but when I print out the photos.length at the tab create call back function part it prints out the correct result.
Try to set "run_at":"document_start" option for your res.js in the manifest.
I think callback from chrome.tabs.create is fired right away without waiting for page scripts to be loaded, so you might try something like this instead:
//global vars
var createdTabId = null;
var myJSPhotos = null;
xhReq.onreadystatechange = function () {
//assign myJSPhotos to a global var
chrome.tabs.create({"url":"results.html"},function(thistab){
createdTabId = thistab.id;
});
}
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if(changeInfo.status == "complete" && tab.id == createdTabId) {
createdTabId = null;
//now page is loaded and content scripts injected
var port = chrome.tabs.connect(tab.id);
port.postMessage({photos:myJSPhotos});
}
});