Að búa til Chrome extension með Yeoman og GRUNT

Já hérna er enn annað fiktið hjá en núna í staðin fyrir að nota gulp þá nota ég grunt. Ástæðan er bara sú að Chrome viðbótin sem ég nota úr  Yeoman notar grunt. 

Málið er að ég fékk snildar hugmynd (fannst mér) um daginn til að ná í html property upplýsingar (id,css etc.) af vefsíðu bara með því að smella á html elementið og velja "vista". Þannig gæti ég hratt fengið nákvæmlega þær upplýsingar sem ég þyrfit án þess að fara hægri smella og velja inspect og lýsa upp propertíin og vista þau. Þetta myndi bara safna því saman sem ég þyrfi. Málið er að ég þarf 2-3 html propertý sem ég þarf síðan að vista í skrá.

Þetta harmonerar síðan alveg svakalega vel við hlut sem ég þarf reglulega að gera í vinnunni. Þar þarf ég að taka 1 propertý og búa til SQL select skipun með gildinu.

Ég leitaði aðeins að upplýsingum um það hvernig væri best að búa til svona Chrome viðbót og fann þessa grein hérna Creating A “Save For Later” Chrome Extension With Modern Web Tools . Ég fann hana í raun bara eftir að hafa verið búinn að fikta aðeins með Extentionizer og vantaði upplýsingar sem leiddu mig á þessa grein. 

Ástæðan fyrir því að ég ætla að fara eftir henni er að hún er að nota Yeoman sem mig hefur langað að prófa en einnig það að hún er að nota npm,gulp og bower eins og ég hef verið  að nota undanfarið.

Fyrstu skref

  1. Fara eftir því sem stendur í Creating A “Save For Later” Chrome Extension With Modern Web Tools
  2. Hérna eru nánari upplýsingar um hvað hvert skref í Yeoman þýðir. 

  Þetta var klárlega ekki eins auðvelt og ég hélt í byrjun. Ég þurfti að búa til Yeoman projectið nokkrum sinnum af því ég skildi ekki alveg valmöguleikana. Ég mæli síðan með þessu "powerpoint"-i hérna Google Chrome Extensions sem er mun betra "visual" útskýring heldur en allt annað sem ég skoðaði.

Loka niðurstaða

 Þetta var bara frekar strembið allt saman og mikið fikt. EN mér er núna búið að takast að velja element á síðu þar sem ég næ í id-ið á því, bý til streng og vista hann í clipboardið.

1.  

 Byrja á því að bæta Jquery í manifest.js skránna

     "js": ["scripts/jquery.min.js","scripts/contentscript.js"] 

og muna að hafa hana á undann contenscript.js svo hún nýtist. 

 

2.

Byrjaðu að bæta eftirfarandi kóða í  contentscript.js

 'use strict';

var lastElementContext;

var globalTarget;

 

//Setur  "hlust" á menu-inn sem uppfærir global breytuna

document.addEventListener('contextmenu', function(event) {

      globalTarget= event.target || event.srcElement;

}, true);


chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {  

  //Nær í id-ið.

var id = $(globalTargett).attr('id');

if(id)

{

var sqlText = "select * from IdTable"+ id;

var copyText = confirm("Copy "+ sqlText + "?");

if(copyText)

{

//Content scriptan getur ekki vistað á clipboardið þannig að það þarf að senda skilaboð yfir til background.js sem er extension hlutinn.

//http://stackoverflow.com/a/25627634/1187583

chrome.runtime.sendMessage({

    type: 'copy',

    text: sqlText 

});

}

}

});

 

3.

Bætti svo þessum kóða í background.js

//Býr til menu-inn þegar er hægrismellt

chrome.contextMenus.create({

    title: 'Get  Id',

    contexts: ['page', 'link', 'editable', 'image', 'video', 'audio'],

    onclick: function(info, tab) {

        chrome.tabs.sendMessage(tab.id, 'getIdStuff');

    }

});

 

//Sér um að kopera yfir í clipboardið. 

 chrome.runtime.onMessage.addListener(function(message) {

    if (message && message.type == 'copy') {

        var input = document.createElement('textarea');

        document.body.appendChild(input);

        input.value = message.text;

        input.focus();

        input.select();

        document.execCommand('Copy');

        input.remove();

    }

}); 

 Jæja svona fór nú um þessa tilraun. Hún var skemmtileg og mun ég vonandi geta gert eitthvað sniðugt við þetta í framtíðinni :-) 

Currently rated 5.0 by 1 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Posted by: sturlath
Posted on: 3/8/2015 at 10:04 AM
Tags: , , , , ,
Categories: Forritun | Vinnan
Actions: E-mail | Kick it! | DZone it! | del.icio.us
Post Information: Permalink | Comments (0) | Post RSSRSS comment feed

Að hætta að nota nuget fyrir client side libraries og nota Bower í staðinn

Núna held ég að ég þurfi að fara að prófa að nota nýja "client side library" stuffið "frá" Microsoft.
 
Í haust las ég grein, Introducing Gulp, Grunt, Bower, and npm support for Visual Studio , eftir Scott Hanselmann og skildi bara ekki almennilega afhverju við ættum að hætta að nota nuget fyrir þessa hluti en nota nuget fyrir backend dótið!!?? Var það ekki bara til að auka við flækjustigið? Hvað væri ég að græða á þessu?

En í dag las ég þessa grein Using Bower with Visual Studio og þegar ég las þennann part hérna

"We can’t expect a developer who creates a fancy new JavaScript library to publish their library as a NuGet package. That developer might have nothing to do with the Microsoft ecosystem and expecting them to learn it so we can use their package is just not reasonable. This brings us to the current state of client side packages on Nuget. Many packages are not available on Nuget. Equally as frustrating, some packages are available but are horribly out of date. This seems to be getting worse lately."

... þá náði ég þessu... næsta skref verður s.s að setja upp project í kvöld og fara í gengum þessi skref til að prófa!
 
UPDATE: kl 23:45
Jæja búinn að setja þetta allt upp og þetta keyrir þetta fína. Núna er bara spurning hvað ég geri við þetta. Ágætis lærdómur að prófa þetta. Mér sýnist þetta vera ferlega öflugt saman. Þarf að gera eitthvað við þetta. Sjáum til hvað það verður :-)

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Posted by: sturlath
Posted on: 2/18/2015 at 11:27 AM
Tags: , , ,
Categories: Forritun
Actions: E-mail | Kick it! | DZone it! | del.icio.us
Post Information: Permalink | Comments (0) | Post RSSRSS comment feed