EminYahyayev

#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

EminYahyayev

<?xml version="1.0" encoding="utf-8"?>
<!-- Add this as a debug manifest so the permissions won't be required by your production app -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.DISABLE_KEYGUARD" />
</manifest>

EminYahyayev

@Override
public void onMenuToggle(final boolean isOpen) {
    setBackgroundDimming(isOpen);
}

private void setBackgroundDimming(boolean dimmed) {
    final float targetAlpha = dimmed ? 1f : 0;
    final int endVisibility = dimmed ? View.VISIBLE : View.GONE;
    mDimmerView.setVisibility(View.VISIBLE);
    mDimmerView.animate()

EminYahyayev

Android Cheat Sheet

Developer tips

Record a video of your app

Developer options -> Check show touches
adb shell screenrecord /sdcard/video.mp4
adb pull /sdcard/video.mp4

EminYahyayev

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="material_red50">#ffffebee</color>
    <color name="material_red100">#ffffcdd2</color>
    <color name="material_red200">#ffef9a9a</color>
    <color name="material_red300">#ffe57373</color>
    <color name="material_red400">#ffef5350</color>
    <color name="material_red500">#fff44336</color>
    <color name="material_red600">#ffe53935</color>
    <color name="material_red700">#ffd32f2f</color>

EminYahyayev

package com.ewintory.udacity.popularmovies.utils;

import android.content.Context;
import android.support.v7.widget.RecyclerView;

import com.squareup.picasso.Picasso;
import com.squareup.picasso.RequestCreator;

/**
 * Simple {@link RecyclerView.OnScrollListener} implementation which

EminYahyayev

package az.dgtl.egg.ui.widget;

import android.content.Context;
import android.support.v7.widget.CardView;
import android.util.AttributeSet;
import android.view.View;

/**
 * Based on CommonsWare's AspectLockedFrameLayout
 */

EminYahyayev

package com.ewintory.udacity.popularmovies.ui.adapter;

import android.graphics.PorterDuff;
import android.support.annotation.NonNull;
import android.support.v4.app.Fragment;
import android.support.v7.graphics.Palette;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageButton;

EminYahyayev

package com.ewintory.udacity.popularmovies.ui.adapter;

import android.support.annotation.NonNull;
import android.support.v4.app.Fragment;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.ViewGroup;

import com.ewintory.udacity.popularmovies.R;

EminYahyayev

import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.TabLayout;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;

import com.blackcj.designsupportexample.adapters.RecyclerViewAdapter;