diff --git a/README.md b/README.md index 455896f94..0871f86cd 100644 --- a/README.md +++ b/README.md @@ -1,49 +1,85 @@ # Fake news debunker by InVID, WeVerify and vera.ai -This plugin has been designed as a verification “Swiss army knife” helping journalists to save time and be more efficient in their fact-checking and debunking tasks on social networks especially when verifying videos and images. +This plugin is a verification “Swiss army knife” helping journalists to save time and be more +efficient in their fact-checking and debunking tasks on social networks especially when verifying videos and images. -The provided tools allow you to quickly get contextual information on Facebook and YouTube videos, perform a reverse image search on Google, Baidu or Yandex search engines, to fragment videos from various platforms (Facebook, Instagram, YouTube, Twitter, Daily Motion) into keyframes, to enhance and explore keyframes and images through a magnifying lens, to query Twitter more efficiently through time intervals and many other filters, to read video and image metadata, and to apply forensic filters on still images. +The provided tools allow you to quickly get contextual information on Facebook and YouTube videos, perform a reverse +image search on Google, Baidu or Yandex search engines, to fragment videos from various platforms (Facebook, Instagram, +YouTube, Twitter, Daily Motion) into keyframes, to enhance and explore keyframes and images through a magnifying lens, +to query Twitter more efficiently through time intervals and many other filters, to read video and image metadata, and +to apply forensic filters on still images. -For further details about the tool and the already released versions, please visit the plugin page on our latest project [website](https://www.veraai.eu/category/verification-plugin/). +For further details about the tool and the already released versions, please visit the plugin page on our latest +project [website](https://www.veraai.eu/category/verification-plugin/). -For any feedback (bugs, enhancement, suggestions), please use the feedback tool within the plugin (on the bottom right). +**For any feedback (bugs, enhancement, suggestions), please use the feedback tool within the plugin (on the bottom +right) or file an issue on GitHub.** -This plugin was initially developed by the InVID European project (2016-2018), a Horizon 2020 Innovation Action funded by the European Union under Grant Agreement 687786. It has been enhanced by the WeVerify European project (2018-2021), a Horizon 2020 Innovation Action funded by the European Union under Grant Agreement 825297. Since September 2022, it is improved within the [vera.ai project](https://veraai.eu) under Grant Agreement 101070093. +This plugin was initially developed by the InVID European project (2016-2018), a Horizon 2020 Innovation Action funded +by the European Union under Grant Agreement 687786. It has been enhanced by the WeVerify European project (2018-2021), a +Horizon 2020 Innovation Action funded by the European Union under Grant Agreement 825297. Since September 2022, it is +improved within the [vera.ai project](https://veraai.eu) under Grant Agreement 101070093. -For more information about those three projects, visit the [vera.ai website](https://veraai.eu), the [WeVerify website](https://weverify.eu/), and [InVID website](http://www.invid-project.eu) or follow us on [veraai_eu](https://twitter.com/veraai_eu), [InVID_EU](https://twitter.com/InVID_EU) or on [WeVerify](https://twitter.com/WeVerify). +For more information about those three projects, visit the [vera.ai website](https://veraai.eu), +the [WeVerify website](https://weverify.eu/), and [InVID website](http://www.invid-project.eu) or follow us +on [veraai_eu](https://twitter.com/veraai_eu), [InVID_EU](https://twitter.com/InVID_EU) or +on [WeVerify](https://twitter.com/WeVerify). -**Disclaimer:** This software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and non-infringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software. +**Disclaimer:** This software is provided "as is", without warranty of any kind, express or implied, including but not +limited to the warranties of merchantability, fitness for a particular purpose and non-infringement. In no event shall +the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, +tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software. -## Project setup +## Getting Started -To setup this project you need to run: +The Verification plugin is a browser based plugin built with React and Redux. -### `npm install` or `yarn install` +1. To install the dependencies run + ``` + npm install + ``` + or + ``` + yarn install + ``` -#### You will also need a `.env` File containing : +3. Add an `.env` file at the root containing + ``` + REACT_APP_ELK_URL=/twinttweets/_search + REACT_APP_TWINT_WRAPPER_URL= + REACT_APP_FACEBOOK_APP_ID= + REACT_APP_TRANSLATION_GITHUB=https://raw.githubusercontent.com/AFP-Medialab/InVID-Translations/react/ + REACT_APP_KEYFRAME_TOKEN= + REACT_APP_MY_WEB_HOOK_URL= + REACT_APP_GOOGLE_ANALYTICS_KEY= + REACT_APP_MAP_TOKEN= + REACT_APP_BASEURL= + ``` - REACT_APP_ELK_URL=/twinttweets/_search - REACT_APP_TWINT_WRAPPER_URL= - REACT_APP_FACEBOOK_APP_ID= - REACT_APP_TRANSLATION_GITHUB=https://raw.githubusercontent.com/AFP-Medialab/InVID-Translations/react/ - REACT_APP_KEYFRAME_TOKEN= - REACT_APP_MY_WEB_HOOK_URL= - REACT_APP_GOOGLE_ANALYTICS_KEY= - REACT_APP_MAP_TOKEN= - REACT_APP_BASEURL= +## Build the project -####Then you need to load the extension in your browser: +- Run the `dev` script to build the React app in development mode + ``` + npm run dev + ``` -Build the extension using the available scripts to generate the file `dev` or `build`. (#some-markdown-heading) +- Run the `build` to build the React app for production + ``` + npm run build + ``` -#### For Chrome : -- In chrome menu go to `More tools` then click `Extentions` -- Activate the `Developer mode` toggle -- The click the `Load Unpacked` button -- Select the `dev` or `build` file you generated earlier. +## Load the extension on the browser -#### For Firefox : +#### Google Chrome / Chromium-based browsers + +[Chrome for Developers documentation](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked) + +- Go to the Extensions page by entering [chrome://extensions/](chrome://extensions/) in a new tab. +- Enable **Developer Mode** by clicking the toggle switch next to Developer mode. +- Click the **Load unpacked** button and select the extension directory (go inside the `build` folder). + +#### Firefox ( ⚠️ deprecated) - In firefox menu click on `Add-ons` - Then click on the gear button `⚙⌄` @@ -51,301 +87,39 @@ Build the extension using the available scripts to generate the file `dev` or `b - Then click on `Load TEmporary Add-on...` - Select the `manifest.json` in the `dev` or `build` file you generated earlier. -## Available Scripts - -In the project directory, you can run: - -### `npm run dev` or `yarn dev` - -Runs the app in the development mode.
-This will run on port [3000](http://localhost:3000). - -The extension will reload if you make edits.
-You will also see any lint errors in the console. - -### `npm run build` or `yarn build` - -Builds the app for production to the `build` folder.
-It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
-Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -##Project structure - -`public` : Contains the basic files for an extension (manifest.json etc) and the root htlm file (popup.html) - -`src/background` : Contains the srcipts that are executed in the web browser background by the extension. The right click menu for example. - -`src/contentScript` : Contains the srcipts executed in the visited pages.(Now empty) - -`src/Hooks` : Contains react custom hooks used in this project. - -`src/LocalDictionary` : Contains the `components` file from this [github repository](https://github.com/AFP-Medialab/InVID-Translations/tree/react) (This is used as a local backup for the extension if the github is unavailable) - -`src/redux` : Contains react-redux actions and reducers. [Documentation](https://react-redux.js.org/) [basic Tutorial](https://www.youtube.com/watch?v=CVpUuw9XSjY) - -####`src/components` - -This file contains all the different components that are used in this project. - -`src/components/Shared` : Contains all the components that are reused in multiple different components. - -`src/components/FeedBack`: The FeedBack tool - -`src/components/PopUp`: The PopUp of the extension. - -`src/components/MySnackBar`: The little arrow that enable you to get back to the top of the page quickly. - -`src/components/Navbar`: The NavBar and its Drawer (for tools) - -`src/components/NavItems`: All components that the navBar can display. - -`src/components/NavItems/tools`: All components that the `tools drawer` can display. - -## How do I add an item to the `Navbar` of this project ? - -- First go to `src/components/Navbar/Navbar.js` file. Add an object to the `tabItems` list like so : - -``` -import yourImage from "./path/to/your/image"; - -const tabItems = [ - { - title: "navbar_tools", - icon: - - - , - content:
, - path: "tools", - footer:
, - }, - //(...) - { - title: "navbar_factCheck", - icon: , - content: , - path: "factCheck", - footer: