mirror of
https://github.com/twentyhq/twenty.git
synced 2024-12-11 00:33:21 +03:00
1265dc74d0
* build: create a new vite project for chrome extension * feat: configure theme per the frontend codebase for chrome extension * feat: inject the add to twenty button into linkedin profile page * feat: create the api key form ui and render it on the options page * feat: inject the add to twenty button into linkedin company page * feat: scrape required data from both the user profile and the company profile * refactor: move modules into options because it is the only page using react for now * fix: show add to twenty button without having to reload the single page application * fix: extract domain of the business website instead of scrapping the industry type * feat: store api key to local storage and open options page when trying to store data without setting a key * feat: send data to the backend upon click and store it to the database * fix: open options page upon clicking the extension icon * fix: update terminology from user to person to match the codebase convention * fix: adopt chrome extension to monorepo approach using nx and get the development server working * fix: update vite config for build command to work per the requirement * feat: add instructions in the readme file to install the extension for local testing * fix: move server base url to a dotenv file and replace the hard-coded url * feat: permit user to configure a custom route for the server from the options page * fix: fetch api key and route from local storage and display on options page to inform users of their choices * fix: move front base url to dotenv and replace the hard-coded url * fix: remove the trailing slash from person and company linkedin username * fix: improve code commenting to explain implementation somewhat better * ci: introduce a workflow to build chrome extension to ensure it can be published * fix: format files to display code in a consistent manner per the prettier configuration in codebase * fix: improve the commenting significantly to explain important and hard-to-understand parts of the code * fix: remove unused permissions from the manifest file for publishing to the chrome web store * Add nx * Fix vale --------- Co-authored-by: Charles Bochet <charles@twenty.com>
52 lines
2.1 KiB
Markdown
52 lines
2.1 KiB
Markdown
# Twenty Chrome Extension.
|
|
|
|
This extension allows you to save `company` and `people` information to your twenty workspace directly from LinkedIn.
|
|
|
|
To install the extension in development mode with hmr (hot module reload), follow these steps.
|
|
|
|
- STEP 1: Clone the repository and run `yarn install` in the root directory.
|
|
- STEP 2: Once the dependencies installation succeeds, create a file with env variables by executing the following command in the root directory.
|
|
|
|
```
|
|
cp ./packages/twenty-chrome-extension/.env.example ./packages/twenty-chrome-extension/.env
|
|
```
|
|
|
|
- STEP 3: Now, execute the following command in the root directory to start up the development server on Port 3002. This will create a `dist` folder in `twenty-chrome-extension`.
|
|
|
|
```
|
|
yarn nx start twenty-chrome-extension
|
|
```
|
|
|
|
- STEP 4: Open Google Chrome and head to the extensions page by typing `chrome://extensions` in the address bar.
|
|
|
|
<p align="center">
|
|
<img src="../twenty-chrome-extension/public/readme-images/01-img-one.png" width="600" />
|
|
</p>
|
|
|
|
- STEP 5: Turn on the `Developer mode` from the top-right corner and click `Load unpacked`.
|
|
|
|
<p align="center">
|
|
<img src="../twenty-chrome-extension/public/readme-images/02-img-two.png" width="600" />
|
|
</p>
|
|
|
|
- STEP 6: Select the `dist` folder from `twenty-chrome-extension`.
|
|
|
|
<p align="center">
|
|
<img src="../twenty-chrome-extension/public/readme-images/03-img-three.png" width="600" />
|
|
</p>
|
|
|
|
- STEP 7: This opens up the `options` page, where you must enter your API key.
|
|
|
|
<p align="center">
|
|
<img src="../twenty-chrome-extension/public/readme-images/04-img-four.png" width="600" />
|
|
</p>
|
|
|
|
- STEP 8: Reload any LinkedIn page that you opened before installing the extension for seamless experience.
|
|
- STEP 9: Visit any individual or company profile on LinkedIn and click the `Add to Twenty` button to test.
|
|
|
|
<p align="center">
|
|
<img src="../twenty-chrome-extension/public/readme-images/05-img-five.png" width="600" />
|
|
</p>
|
|
|
|
To install the extension in production mode without hmr (hot module reload), replace the command in STEP THREE with `yarn nx build twenty-chrome-extension`.
|