imasters.com.br Open in urlscan Pro
45.42.162.11  Public Scan

Form analysis
2 forms found in the DOM

/resultado-de-busca

<form action="/resultado-de-busca" class="search-form">
  <div class="search-form__field"><label class="search-form__label">Digite sua palavra-chave</label><input type="text" name="s" class="search-form__input" placeholder="O que você procura?"></div><button type="submit" class="search-form__submit"><span
      class="icon icon--search "><svg width="17px" height="17px" viewBox="0 0 30 30">
        <title>Busca</title>
        <path fill="currentColor"
          d="M22.764 20.643l6.797 6.797c0.586 0.586 0.586 1.536 0 2.121s-1.536 0.586-2.121 0l-6.797-6.797c-2.171 1.713-4.912 2.736-7.893 2.736-7.042 0-12.75-5.708-12.75-12.75s5.708-12.75 12.75-12.75c7.042 0 12.75 5.708 12.75 12.75 0 2.98-1.023 5.722-2.736 7.893zM19.74 19.548c1.708-1.756 2.76-4.154 2.76-6.798 0-5.385-4.365-9.75-9.75-9.75s-9.75 4.365-9.75 9.75c0 5.385 4.365 9.75 9.75 9.75 2.644 0 5.041-1.052 6.798-2.76 0.029-0.034 0.059-0.068 0.092-0.1s0.066-0.063 0.1-0.092z">
        </path>
      </svg></span></button>
</form>

<form>
  <header class="newsletter__header">
    <h2 class="title-highlight">Assine nossa<strong class="title-highlight__large">Newsletter</strong></h2>
    <p>Fique em dia com as novidades do iMasters! Assine nossa newsletter e receba conteúdos especiais curados por nossa equipe</p>
  </header>
  <div class="newsletter__form"><span id="" class="field--has-icon field field--email  "><span class="field__content"><input type="email" id="" name="newsletterEmail" placeholder="Qual é o seu e-mail?"><span class="icon icon--package "><svg
            width="20px" height="20px" viewBox="0 0 28 30">
            <title>package</title>
            <path fill="currentColor"
              d="M20.572 11.435c-0.008 0.004-0.016 0.008-0.024 0.012l-5.548 2.774v12.211l9.306-4.653c0.425-0.211 0.693-0.644 0.694-1.118v-11.44l-4.428 2.214zM10.301 4.077l9.699 4.849 3.449-1.724-9.144-4.572c-0.35-0.174-0.761-0.173-1.109-0.001l-2.895 1.448zM7.506 5.474l-3.455 1.727 9.699 4.849 3.455-1.727-9.699-4.849zM6.836 3.014c0.068-0.042 0.139-0.078 0.213-0.107l5.032-2.516c1.051-0.522 2.286-0.522 3.338 0l10 5c1.274 0.633 2.080 1.933 2.081 3.357v11.913c-0.001 1.423-0.807 2.723-2.078 3.355l-10 5c-1.056 0.529-2.3 0.529-3.356 0l-10.003-5.002c-1.273-0.641-2.072-1.949-2.063-3.366v-11.901c0.001-1.423 0.807-2.723 2.078-3.355l4.758-2.379zM12.5 26.439v-12.217l-10-5-0 11.436c-0.003 0.475 0.263 0.911 0.684 1.123l9.316 4.658z">
            </path>
          </svg></span></span></span><button type="submit" class="btn-primary btn-primary--submit">Assinar</button></div>
</form>

Text Content

we are developers

 * Fórum iMasters
 * Portal E-Commerce Brasil
 * iMasters Business

Busca

close-circle
Digite sua palavra-chave
Busca


POWERED BY:

 * facebook
 * twitter
 * linkedin

 * packageBack-End
 * packageMobile
 * packageFront End
 * packageDevSecOps
 * packageDesign & UX
 * packageData
 * packageAPIs e Microsserviços



Desenvolvimento

19 jul, 2016


CHROME EXTENSION: SCRIPTS E ACESSOS

 * facebook-color
 * twitter-color
 * linkedin-color

COMPARTILHE!


ANDRÉ FERREIRA

Tem 4 artigos publicados com 1600 visualizações desde 2016

Publicidade



ANDRÉ FERREIRA

4edit

é autodidata em desenvolvimento de sistemas, analista de sistemas/programador
com mais de 10 anos de experiência de mercado. Formação em Marketing pela
Faculdade Anhanguera e em formação em Direito pela Faculdade Estácio de Sá.
Empreendedor serial, criador dos blogs Node Decode e BR.JS, das ferramentas
Crawler.com.br, Hawk, Take and Make, Baixou (https://www.baixou.com.br/) e
It'simple (https://itssimple.com.br/), entre outros. Experiência em
desenvolvimento de buscadores de produtos, webcrawlers, arquitetura de software,
desenvolvimento de software, gestão de empresas, gestão comercial, gestão de
mídias e mídias sociais, Atualmente CTO do It'simple
(https://itssimple.com.br/), redator do BR.JS (http://brjs.com.br/) e
palestrante em eventos de tecnologia como Google GDG, Google I/O
(http://webes.com.br/io16/).

Leia mais
4 ago, 2016


DADOS ESTRUTURADOS (RICH SNIPPETS) PARA O GOOGLE

29 jul, 2016


CHROME EXTENSION + PUSH BROWSER COM ONESIGNAL

19 jul, 2016


CHROME EXTENSION: SCRIPTS E ACESSOS



Hoje vou falar um pouco de Chrome Extensions, pois precisei estudar bastante
para desenvolver a nova ferramenta da minha startup que é uma extensão para
Chrome, futuramente liberada também para Firefox, disponível para teste beta em
https://goo.gl/1ui3sU. Achei o tema interessante, pois tive muito problema para
resolver. Primeiramente, vamos entender como funciona uma extensão para Google
Chrome…

Aparentemente, as extensões para Chrome são scripts feitos em JavaScript que
podem ou não conter um conteúdo visual, e que interagem com a página em que você
está no navegador, porém essa interação é limitada por questões de segurança,
então basicamente existem três tipos de scripts que podem ser criados para sua
extensão.


SCRIPTS DE CONTEÚDO

O primeiro e mais comum são scripts que rodam em ligação parcial com a página
aberta – é possível inserir, editar e remover elementos via JavaScript, além de
adicionar bibliotecas como jQuery e AngularJS para facilitar o desenvolvimento,
mas o content_script não tem acesso ao window da página. Sendo assim, não será
possível executar, por exemplo, scripts existentes na página. Para criar um
content_scripts, basta adicionar no manifest.json as seguintes linhas:

"content_scripts": [{
    "js": ["jquery-3.0.0.min.js", "contentscript.js"],
    "css": ["css/style.css"],
    "matches": ["*://*/*"]
}],

No exemplo acima, foram solicitados o jQuery e um script personalizado chamado
coontentscript.js. Perceba que é possível chamar quantos arquivos forem
necessários. Ainda é possível chamar CSS, e suas bibliotecas não irão
influenciar a página diretamente, já que os escopos são separados. Veja a
ilustração da documentação:



Para rodar um content_script, será necessária uma permissão de leitura e escrita
de abas que deve ser informada no próprio manifest.json:

"permissions": [
    "tabs"     
]

Lembrando: será possível realizar manipulação de componentes do document, mass
não será possível acessar o window. A documentação completa está disponível em:
https://developer.chrome.com/extensions/content_scripts


SCRIPTS DE BACKGROUND

O script de background será utilizado para rotinas que dependem de acesso total
ao Chrome e suas abas, porém esse modo não tem acesso ao document. É possível,
por exemplo, implementar Push Browser diretamente no background, mas não será
possível realizar interação entre o background e o content_script – eles rodam
em ‘instâncias’ diferentes. Para implementar um script em background, será
necessário informar no manifest.json:

"background": {
    "persistent": false,
    "scripts": ["OneSignal.js", "background.js"]
},

Perceba que no exemplo acima, utilizei o OneSignal para Push Browser. A
implementação é bem simples, vou deixar o link tanto da documentação dos scripts
background: https://developer.chrome.com/extensions/background_pages quanto da
documentação do OneSignal para Chrome Extension:
https://documentation.onesignal.com/docs/chrome-app-sdk-installation

O parâmetro ‘persistent’ define se o script ficará rodando de formar contínua,
ou se será apenas executado uma única vez, caso haja necessidade de realizar
monitoramentos, por exemplo.


RECURSOS ACESSÍVEIS WEB

O terceiro modo de script possui interação direta com o window e o document, mas
não possui interação entre os content scripts e background. A minha sugestão é
utilizar campos hidden caso haja necessidade de uma comunicação, já que o
content_scripts e o injection possuem ambos acesso ao document, pelo menos foi a
forma como consegui resolver o problema de disparar eventos do window da aba.
Para implementar um injetion, serão necessárias duas etapas. Primeiro, informe
no manifest.json quais scripts estão autorizados a ser injetado na aba:

"web_accessible_resources": ["facebookSDK.js", "script.js"],

No meu caso, estou usando API do Facebook para gerar telas de compartilhamento,
e possui um script personalizado. Dentro do content scripts, adicione a chamada
do script

//FacebookSDK
var s = document.createElement('script');
s.src = chrome.extension.getURL('facebookSDK.js');
s.onload = function() {this.parentNode.removeChild(this);};
(document.head || document.documentElement).appendChild(s);

Quero terminar o artigo deixando um abraço aos meus sócios do It’simple e da
1001 Cupom de Descontos por terem concebido essa que, para mim, é a ferramenta
mais útil que eu já fiz. Comparação em tempo real e checkout automático de
cupons na própria loja eram um sonho que se tornou real graças essa parceria, e
a todos os meus queridos leitores deixo mais uma vez o link para o teste
beta https://goo.gl/1ui3sU. Vejam o vídeo de explicação do uso do radar, e a
lista de lojas parceira do projeto está disponível em
https://itssimple.com.br/stats.

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

012345678910


FILEARTIGOS PUBLICADOS POR ESTE AUTOR


ANDRÉ FERREIRA

4 ago, 2016play


DADOS ESTRUTURADOS (RICH SNIPPETS) PARA O GOOGLE


ANDRÉ FERREIRA

29 jul, 2016play


CHROME EXTENSION + PUSH BROWSER COM ONESIGNAL


ANDRÉ FERREIRA

19 jul, 2016play


CHROME EXTENSION: SCRIPTS E ACESSOS

Saiba mais


ANDRÉ FERREIRA

 * facebook
 * e-mail

edit4 Artigo(s)

é autodidata em desenvolvimento de sistemas, analista de sistemas/programador
com mais de 10 anos de experiência de mercado. Formação em Marketing pela
Faculdade Anhanguera e em formação em Direito pela Faculdade Estácio de Sá.
Empreendedor serial, criador dos blogs Node Decode e BR.JS, das ferramentas
Crawler.com.br, Hawk, Take and Make, Baixou (https://www.baixou.com.br/) e
It'simple (https://itssimple.com.br/), entre outros. Experiência em
desenvolvimento de buscadores de produtos, webcrawlers, arquitetura de software,
desenvolvimento de software, gestão de empresas, gestão comercial, gestão de
mídias e mídias sociais, Atualmente CTO do It'simple
(https://itssimple.com.br/), redator do BR.JS (http://brjs.com.br/) e
palestrante em eventos de tecnologia como Google GDG, Google I/O
(http://webes.com.br/io16/).




ESTE PROJETO É MANTIDO E PATROCINADO PELAS EMPRESAS





ASSINE NOSSANEWSLETTER

Fique em dia com as novidades do iMasters! Assine nossa newsletter e receba
conteúdos especiais curados por nossa equipe

packageAssinar

 * Sobre o iMasters
 * Política de Privacidade
 * Fale conosco
 * Quero ser autor
 * Fórum
 * iMasters Business