Importing inboxsdk into angularapp

[Anuj Godase]

Hello,

I am making a chrome extension using angular.

I would like to import inboxsdk to be used inside angular-app.

any help is appreciated.

[er...@streak.com]

Hey there!

Using Angular with InboxSDK should be doable, but our team hasn't had any experience setting something like that up so I can't advise on the details. As an aside, we highly recommend using a framework like React that puts a focus on small, discrete components when working with InboxSDK (and Gmail/Inbox in general). More comprehensive frameworks like Angular, Ember, etc. typically expect that they have full control over the page and are designed with that use case in mind, which can make them a bit unwieldy to use in Gmail/Inbox where you mostly want to add individual pieces of custom UIs to areas defined by the SDK (for example: a sidebar widget next to a thread or a dropdown in a compose window). If you're interested in using something like React I can send along some examples (we actually use React inside InboxSDK for a couple of features), otherwise I hope you are able to get up and running on Angular!

[John]

Can you send react sample because I can't make the angular to work. Thanks!

[er...@streak.com]

Definitely, here's a very brief idea of what using InboxSDK + React looks like:

The approach that suits the SDK's architecture best is to treat each area where your extension inserts content as its own separately mounted component. Following this approach, your extension ends up being a set of React components that are "orchestrated" by the SDK (i.e. they appear at the right time based on what the user is currently doing in Gmail/Inbox). Here's a quick example, using a ComposeView button with its own dropdown:

import React from 'react';

import ReactDOM from 'react-dom';

import ComposeDropdown from './components/ComposeDropdown'; // React Component

InboxSDK.load(2, 'YOUR_APP_ID_HERE').then(({Compose}) => {

  Compose.registerComposeViewHandler((composeView) => {

    composeView.addButton({

      title: "My Nifty Button!",

      iconUrl: 'https://example.com/foo.png',

      hasDropdown: true,

      onClick(event) {

        ReactDOM.render(<ComposeDropdown />, event.dropdown.el);

        event.dropdown.once('destroy', () => (

          ReactDOM.unmountComponentAtNode(event.dropdown.el)

        ));

      }

    });

  });

});

The two key points here: 

1. In your ComposeView button's onClick() handler, you mount your React component like you would any other using the event.dropdown.el property — this is just an empty HTMLElement inside of the dropdown rendered by the SDK.

2. event.dropdown also provides a 'destroy' event which fires when the dropdown goes away (you can do this in your own code by calling event.dropdown.close() but it can also be triggered by the user clicking outside of your dropdown). When mounting a React component, it is best to register a listener for the 'destroy' event and call ReactDOM.unmountComponentAtNode() to cleanup your component. In the example we use .once() so that the listener will automatically unregister itself after a 'destroy' event fires.

If you're adding something that's not a dropdown (e.g. a ThreadView sidebar) the code looks very similar.

Hope that helps!

[harsh.p...@stateauto.com]

Is there a complete example for this integration (InboxSDK + React)?

Thank you, 

Harsh

[harsh.p...@stateauto.com]

After trying bunch of options I have following error :

Refused to execute script from 'https://mail.google.com/mail/u/inboxsdk.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

I am using Chrome Version 60.0.3112.90 (Official Build) (64-bit)

Please help!

Thank you, 

Harsh 

[harsh.p...@stateauto.com]

[Chris Cowan]

Here's a small example using yarn, browserify+babel, and react.

Run this in a terminal:

yarn init

yarn add cross-env browserify watchify babelify babel-polyfill babel-preset-es2015 babel-preset-es2016 babel-preset-es2017 babel-preset-react

Put this in .babelrc:

{

  "presets": ["es2015", "es2016", "es2017", "react"]

}

Make a subdirectory called "extension". Put your manifest.json in it.

Make a subdirectory called "src". Make a file called index.js in it which will be your main file. The rest of your source code should be in src in (transitively) imported by index.js.

Put this in .gitignore:

*~
/node_modules
/extension/bundle.js

Edit package.json to contain "private": true and the following scripts entries:

{

  "name": "foo",

  "version": "1.0.0",

  "private": true,

  "license": "All rights reserved",

  "scripts": {

    "start": "cross-env NODE_ENV=development watchify src/index.js -d -t babelify -o extension/bundle.js",

    "build": "cross-env NODE_ENV=production browserify src/index.js -d -t babelify -o extension/bundle.js"

  },

  "dependencies": {

Now you can run "yarn start" to run watchify so that it will automatically rebuild bundle.js every time one of your source files change. You can run "yarn build" to do a single production build.

Place inboxsdk.js directly into the extension directory, not src. Do not import or require inboxsdk.js. Instead, list it and bundle.js as your two content scripts in extension/manifest.json:

  "content_scripts": [

    {

      "matches": [

        "https://mail.google.com/*",

        "https://inbox.google.com/*"

      ],

      "js": ["inboxsdk.js", "bundle.js"],

           "run_at": "document_start"

    }

  ],

[Chris Cowan]

Argh, google groups butchered the spacing of all of my code blocks. I'm sorry for inflicting that spacing on everyone's eyes.

Also, I actually omitted react and react-dom as dependencies. The setup above will compile React code but not let you import it :P You'll want to "yarn add react react-dom" and whatever other dependencies you want too.