zealot128

<template lang='pug'>
  div.drop-zone(:class='{dragging: isDragging }'
    @dragover.prevent='dragover'
    @dragenter.prevent='dragover'
    @drop.prevent.stop='onDrop'
    @dragleave.prevent='dragleave')
    div(:class='{ hidden: uploadInProgress }' @click='openFileBrowser')
      slot
        i {{label}}
    input(type='file' :multiple='multiple' ref='input' style='display: none')

0xjjpa

#Introduction

Developing Chrome Extensions is REALLY fun if you are a Front End engineer. If you, however, struggle with visualizing the architecture of an application, then developing a Chrome Extension is going to bite your butt multiple times due the amount of excessive components the extension works with. Here are some pointers in how to start, what problems I encounter and how to avoid them.

Note: I'm not covering chrome package apps, which although similar, work in a different way. I also won't cover the page options api neither the new brand event pages. What I explain covers most basic chrome applications and should be enough to get you started.

Table of Contents

1. Understand the Chrome Architecture
2. Understand the Tabs-Extension Relationship
3. Picking the right interface for the job

zhengjia

=Navigating=
    visit('/projects')
    visit(post_comments_path(post))

=Clicking links and buttons=
    click_link('id-of-link')
    click_link('Link Text')
    click_button('Save')
    click('Link Text') # Click either a link or a button
    click('Button Value')