mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-16 06:18:35 +02:00
Remove react example
This commit is contained in:
Will Bamberg
@@ -419,13 +419,6 @@
|
||||
],
|
||||
"name": "quicknote"
|
||||
},
|
||||
{
|
||||
"description": "This is an example of creating a browser action popup UI in React and ES6 JavaScript.",
|
||||
"javascript_apis": [
|
||||
"tabs.query"
|
||||
],
|
||||
"name": "react-es6-popup"
|
||||
},
|
||||
{
|
||||
"description": "Demo of various runtime APIs.",
|
||||
"javascript_apis": [
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
"targets": {
|
||||
"firefox": 57
|
||||
}
|
||||
}],
|
||||
"stage-2",
|
||||
"react"
|
||||
]
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 6,
|
||||
"sourceType": "module",
|
||||
"ecmaFeatures": {
|
||||
"jsx": true
|
||||
}
|
||||
},
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es6": true,
|
||||
"amd": true,
|
||||
"webextensions": true
|
||||
}
|
||||
}
|
||||
5
react-es6-popup/.gitignore
vendored
5
react-es6-popup/.gitignore
vendored
@@ -1,5 +0,0 @@
|
||||
# Ignore build artifacts and other files.
|
||||
.DS_Store
|
||||
yarn.lock
|
||||
extension/dist
|
||||
node_modules
|
||||
@@ -1 +0,0 @@
|
||||
save-prefix=''
|
||||
@@ -1,54 +0,0 @@
|
||||
# React / ES6 Popup Example
|
||||
|
||||
## What it does
|
||||
|
||||
This is an example of creating a browser action
|
||||
[popup](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Add_a_button_to_the_toolbar#Adding_a_popup)
|
||||
UI in [React][react] and [ES6](http://es6-features.org/) JavaScript.
|
||||
|
||||
## What it shows
|
||||
|
||||
* How to bundle [React][react] and any other [NodeJS][nodejs] module into an
|
||||
extension.
|
||||
* How to transpile code that is not supported natively in
|
||||
a browser such as
|
||||
[import / export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
|
||||
syntax and [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html).
|
||||
* How to continuously build code as you edit files.
|
||||
* How to customize [web-ext][web-ext] for your extension's specific needs.
|
||||
* How to structure your code in reusable ES6 modules.
|
||||
|
||||
## Usage
|
||||
|
||||
First, you need to change into the example subdirectory and install all
|
||||
[NodeJS][nodejs] dependencies with [npm](http://npmjs.com/) or
|
||||
[yarn](https://yarnpkg.com/):
|
||||
|
||||
npm install
|
||||
|
||||
Start the continuous build process to transpile the code into something that
|
||||
can run in Firefox or Chrome:
|
||||
|
||||
npm run build
|
||||
|
||||
This creates a WebExtension in the `extension` subdirectory.
|
||||
Any time you edit a file, it will be rebuilt automatically.
|
||||
|
||||
In another shell window, run the extension in Firefox using a wrapper
|
||||
around [web-ext][web-ext]:
|
||||
|
||||
npm start
|
||||
|
||||
Any time you edit a file, [web-ext][web-ext] will reload the extension
|
||||
in Firefox. To see the popup, click the watermelon icon from the browser bar.
|
||||
Here is what it looks like:
|
||||
|
||||
|
||||
|
||||
[react]: https://facebook.github.io/react/
|
||||
[nodejs]: https://nodejs.org/en/
|
||||
[web-ext]: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext
|
||||
|
||||
## Icons
|
||||
|
||||
The icon for this extension is provided by [icons8](https://icons8.com/).
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
@@ -1,17 +0,0 @@
|
||||
{
|
||||
"manifest_version": 2,
|
||||
"name": "react-es6-popup-example",
|
||||
"version": "1.0",
|
||||
|
||||
"browser_action": {
|
||||
"browser_style": true,
|
||||
"default_icon": {
|
||||
"48": "images/Watermelon-48.png",
|
||||
"96": "images/Watermelon-96.png"
|
||||
},
|
||||
"default_title": "React Example",
|
||||
"default_popup": "popup.html"
|
||||
},
|
||||
|
||||
"permissions": ["activeTab"]
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
body {
|
||||
width: 400px;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="popup.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="dist/popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
8901
react-es6-popup/package-lock.json
generated
8901
react-es6-popup/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,23 +0,0 @@
|
||||
{
|
||||
"name": "react-es6-popup-example",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "webpack -w --display-error-details --progress --colors",
|
||||
"start": "web-ext run -s extension/"
|
||||
},
|
||||
"author": "",
|
||||
"license": "MPL-2.0",
|
||||
"devDependencies": {
|
||||
"babel-core": "6.26.0",
|
||||
"babel-loader": "7.1.2",
|
||||
"babel-preset-env": "1.6.1",
|
||||
"babel-preset-react": "6.24.1",
|
||||
"babel-preset-stage-2": "6.24.1",
|
||||
"react": "16.2.0",
|
||||
"react-dom": "16.2.0",
|
||||
"web-ext": "2.3.2",
|
||||
"webpack": "3.10.0"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB |
15
react-es6-popup/src/nested-component.js
vendored
15
react-es6-popup/src/nested-component.js
vendored
@@ -1,15 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export default class Nested extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h2>Nested Component</h2>
|
||||
<p>
|
||||
This is an example of a nested component that was imported via
|
||||
import / export syntax.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
36
react-es6-popup/src/popup.js
vendored
36
react-es6-popup/src/popup.js
vendored
@@ -1,36 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import Nested from './nested-component';
|
||||
|
||||
class Popup extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {activeTab: null};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// Get the active tab and store it in component state.
|
||||
browser.tabs.query({active: true}).then(tabs => {
|
||||
this.setState({activeTab: tabs[0]});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {activeTab} = this.state;
|
||||
return (
|
||||
<div>
|
||||
<h1>React Component</h1>
|
||||
<p>
|
||||
This is an example of a popup UI in React.
|
||||
</p>
|
||||
<p>
|
||||
Active tab: {activeTab ? activeTab.url : '[waiting for result]'}
|
||||
</p>
|
||||
<Nested />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<Popup/>, document.getElementById('app'));
|
||||
@@ -1,45 +0,0 @@
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
// Each entry in here would declare a file that needs to be transpiled
|
||||
// and included in the extension source.
|
||||
// For example, you could add a background script like:
|
||||
// background: './src/background.js',
|
||||
popup: './src/popup.js',
|
||||
},
|
||||
output: {
|
||||
// This copies each source entry into the extension dist folder named
|
||||
// after its entry config key.
|
||||
path: path.join(path.resolve(__dirname), 'extension', 'dist'),
|
||||
filename: '[name].js',
|
||||
},
|
||||
module: {
|
||||
// This transpiles all code (except for third party modules) using Babel.
|
||||
rules: [{
|
||||
exclude: /node_modules/,
|
||||
test: /\.js$/,
|
||||
// Babel options are in .babelrc
|
||||
use: ['babel-loader'],
|
||||
}],
|
||||
},
|
||||
resolve: {
|
||||
// This allows you to import modules just like you would in a NodeJS app.
|
||||
extensions: ['.js', '.jsx'],
|
||||
modules: [
|
||||
'src',
|
||||
'node_modules',
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
// Since some NodeJS modules expect to be running in Node, it is helpful
|
||||
// to set this environment var to avoid reference errors.
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify('production'),
|
||||
}),
|
||||
],
|
||||
// This will expose source map files so that errors will point to your
|
||||
// original source files instead of the transpiled files.
|
||||
devtool: 'sourcemap',
|
||||
};
|
||||
Reference in New Issue
Block a user