React-native-webview-scripts-manager NPM

React Native Webview Scripts Manager

Inspiration from tampermonkey, but for React Native Webview. This library will help you manage injected scripts for your Webview component.

Main Features

Easily manage multiple sites (locally and remotely)
Remote debugging included (thanks to Console.re)
jQuery injected by default

Demo

Manage scripts locally

take a look at example folder

Installation

npm install react-native-webview-scripts-manager --save

yarn add react-native-webview-scripts-manager

No linking required

Dependicies: react-native-webview (Linking required)

Usage

Simple Usage

  import Webview from 'react-native-webview-scripts-manager';

  <Webview
    source={{ uri: this.state.uri }}
    scriptOptions={{
      localScript: localScriptES,
      useLocal: true,
      remoteLogChannel: 'lequanghuylc_react-native-webview-scripts-manager',
    }}
    onRef={ref => this.webview = ref}
  />

Props

Prop	Description
`scriptOptions`	Config the injected script manager
`onRef`	Access the `ref` of raw `react-native-webview` component
The rest of Props	React Native WebView Props

Let's take a look at scriptOptions

scriptOptions Property	Description
`localScript`	An `Object` contains injected scripts of multiple sites
`useLocal`	`Boolean` value to tell if the webview should use local scripts instead of remote scripts
`remoteUrl`	`String` Will call a `GET` request to receive remote scripts. The response must be `{ success: Boolean, data: Object similar to Localscript Object }`
`remoteHeaders`	`Custom Header Object` Use for authorization if needed

The Scripts Object is quite simple. Each property must be the href of a website. The value will be its injected script.

  {

    "https://www.google.com/": "console.re.log(\"Hello world, I'm at google.com\");",

    "https://example.com/": "console.re.log(\"Hello world, I'm at example.com\");"

  }

We can also use * to handle dynamic url:

  {

    "https://example.com/abc/*/def/": "console.re.log(\"Hello world, I'm at a detail page\");"

  }

Note: For now character * wont represent / character. So /a/b/c/* wont match /a/b/c/d/f (it will match /a/b/c/d). Any Pull Request to make it smarter is welcomed.

Local Usage

Split each script into one js file
Combined it into one object
Take a look at example folder

Remote Usage

For now, this project will only support a GET request to receive remote data
If you want to build an CMS or a nice UI for the ease of script CRUD, do it in your own way. Create an API in the end and pass remoteUrl and remoteHeaders to fetch the data
You can use some free services to get it up and running quickly (such as github, myjson.com, jsonbin.io (private json supported))

Example

import Webview from 'react-native-webview-scripts-manager';

<Webview
  source={{ uri: this.state.uri }}
  scriptOptions={{
    useLocal: false,
    remoteUrl: `https://raw.githubusercontent.com/lequanghuylc/react-native-webview-scripts-manager/master/example/localScripts.json`,
    remoteHeaders: {
      'Cache-Control': 'no-cache',
    },
    remoteLogChannel: 'lequanghuylc_react-native-webview-scripts-manager',
  }}
  onRef={ref => this.webview = ref}
/>