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