33 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/src/connectors/item-preview/item-preview.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { ItemPreview } from 'components/item-preview/item-preview'
3 | import { UPDATE_ITEM_PREVIEW } from 'actions'
4 |
5 | export const ItemPreviewConnector = () => {
6 | const [itemPreview, setItemPreview] = useState({})
7 |
8 | /* Handle incoming messages
9 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
10 | const handleMessages = (event) => {
11 | const { payload, action = 'Unknown Action' } = event || {}
12 |
13 | switch (action) {
14 | case UPDATE_ITEM_PREVIEW: {
15 | const { item } = payload
16 | return setItemPreview(item)
17 | }
18 |
19 | default: {
20 | return
21 | }
22 | }
23 | }
24 |
25 | useEffect(() => {
26 | chrome.runtime.onMessage.addListener(handleMessages)
27 | return () => chrome.runtime.onMessage.removeListener(handleMessages)
28 | }, [])
29 |
30 | return (
31 |
34 | { children }
35 |
36 |
41 |
43 | )
44 | ]
45 |
--------------------------------------------------------------------------------
/src/components/icons/icons.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Icon from './icon'
4 | import Error from './svg/Error'
5 | import FacebookMono from './svg/Facebook-Mono'
6 | import Instagram from './svg/Instagram'
7 | import ListView from './svg/List-View'
8 | import PocketLogo from './svg/PocketLogo'
9 | import Settings from './svg/Settings'
10 | import TwitterMono from './svg/Twitter-Mono'
11 |
12 | export const ErrorIcon = (props) => (
13 |
49 | {thumbnail ? 
: null}
50 |
55 | ) : null
56 | }
57 |
--------------------------------------------------------------------------------
/src/actions.js:
--------------------------------------------------------------------------------
1 | export const LOGGED_OUT_OF_POCKET = 'LOGGED_OUT_OF_POCKET'
2 | export const OPEN_POCKET = 'OPEN_POCKET'
3 | export const AUTH_CODE_RECEIVED = 'AUTH_CODE_RECEIVED'
4 | export const COLOR_MODE_CHANGE = 'COLOR_MODE_CHANGE'
5 | export const OPEN_OPTIONS = 'OPEN_OPTIONS'
6 |
7 | export const SAVE_TO_POCKET_REQUEST = 'SAVE_TO_POCKET_REQUEST'
8 | export const SAVE_TO_POCKET_SUCCESS = 'SAVE_TO_POCKET_SUCCESS'
9 | export const SAVE_TO_POCKET_FAILURE = 'SAVE_TO_POCKET_FAILURE'
10 |
11 | export const RESAVE_ITEM = 'RESAVE_ITEM'
12 |
13 | export const UPDATE_ITEM_PREVIEW = 'UPDATE_ITEM_PREVIEW'
14 |
15 | export const REMOVE_ITEM = 'REMOVE_ITEM'
16 | export const REMOVE_ITEM_REQUEST = 'REMOVE_ITEM_REQUEST'
17 | export const REMOVE_ITEM_SUCCESS = 'REMOVE_ITEM_SUCCESS'
18 | export const REMOVE_ITEM_FAILURE = 'REMOVE_ITEM_FAILURE'
19 |
20 | export const SUGGESTED_TAGS_SUCCESS = 'SUGGESTED_TAGS_SUCCESS'
21 | export const SUGGESTED_TAGS_FAILURE = 'SUGGESTED_TAGS_FAILURE'
22 |
23 | export const TAGS_SYNC = 'TAGS_SYNC'
24 | export const TAG_SYNC_REQUEST = 'TAG_SYNC_REQUEST'
25 | export const TAG_SYNC_SUCCESS = 'TAG_SYNC_SUCCESS'
26 | export const TAG_SYNC_FAILURE = 'TAG_SYNC_FAILURE'
27 |
28 | export const UPDATE_STORED_TAGS = 'UPDATE_STORED_TAGS'
29 |
30 | export const SEND_TAG_ERROR = 'SEND_TAG_ERROR'
31 | export const UPDATE_TAG_ERROR = 'UPDATE_TAG_ERROR'
32 |
33 | export const USER_LOG_IN = 'USER_LOG_IN'
34 |
--------------------------------------------------------------------------------
/src/connectors/heading/heading.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import { Heading } from 'components/heading/heading'
3 |
4 | import { REMOVE_ITEM } from 'actions'
5 | import { RESAVE_ITEM } from 'actions'
6 | import { UPDATE_ITEM_PREVIEW } from 'actions'
7 |
8 | export const HeadingConnector = ({ saveStatus }) => {
9 | const [itemId, setItemId] = useState(null)
10 |
11 | /* Handle incoming messages
12 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
13 | const handleMessages = (event) => {
14 | const { payload, action = 'Unknown Action' } = event || {}
15 |
16 | switch (action) {
17 | case UPDATE_ITEM_PREVIEW: {
18 | const { item } = payload
19 | setItemId(item?.itemId)
20 | return
21 | }
22 |
23 | default: {
24 | return
25 | }
26 | }
27 | }
28 |
29 | useEffect(() => {
30 | chrome.runtime.onMessage.addListener(handleMessages)
31 | return () => chrome.runtime.onMessage.removeListener(handleMessages)
32 | }, [])
33 |
34 | const removeAction = () => {
35 | chrome.runtime.sendMessage({
36 | type: REMOVE_ITEM,
37 | payload: { itemId }
38 | })
39 | }
40 |
41 | const saveAction = () => {
42 | chrome.runtime.sendMessage({
43 | type: RESAVE_ITEM
44 | })
45 | }
46 |
47 | return (
48 |
51 |
54 | {title}
52 |{publisher}
53 |
55 |
59 | )
60 | })
61 |
62 | return
56 |
58 | {iconComponents}
63 | }
64 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | #debug file
4 | *debug
5 |
6 | # dependencies
7 | node_modules/
8 |
9 | # testing
10 | coverage/
11 |
12 | # production
13 | _build/
14 | build
15 | releases
16 |
17 | # misc
18 | .DS_Store
19 | .env.local
20 | .env.development.local
21 | .env.test.local
22 | .env.production.local
23 |
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 |
28 | # Account info
29 | keys.js
30 | keys.json
31 | keys.xcconfig
32 |
33 | *-debug
34 |
35 | # ignore npm package lock, using yarn for CI for consistency
36 | package-lock.json
37 |
38 | # Created by https://www.gitignore.io/api/xcode
39 | # Edit at https://www.gitignore.io/?templates=xcode
40 |
41 | ### Xcode ###
42 | # Xcode
43 | #
44 | # gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore
45 |
46 | ## Xcode Patch
47 | *.xcodeproj/*
48 | !*.xcodeproj/project.pbxproj
49 | !*.xcodeproj/xcshareddata/
50 | !*.xcworkspace/contents.xcworkspacedata
51 | /*.gcno
52 |
53 | ### Xcode Patch ###
54 | **/xcshareddata/WorkspaceSettings.xcsettings
55 |
56 | # End of https://www.gitignore.io/api/xcode
57 |
58 | # Ignore Xcode user-related files
59 | xcuserdata/
60 | *.xcuserdatad
61 | *.developerprofile
62 |
63 | # Ignore AppCode user-related files
64 | .idea/
65 | .vscode/
66 |
67 | # Ignore CocoaPods installed files
68 | Pods/
69 |
70 | # Ignore Carthage installed files
71 | Carthage/
72 |
73 | # vsCode
74 | .vscode/
75 |
76 | # linaria
77 | .linaria-cache/
78 |
--------------------------------------------------------------------------------
/src/components/footer/footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { css, cx } from 'linaria'
3 | import { SettingsIcon } from 'components/icons/icons'
4 | import { ListViewIcon } from 'components/icons/icons'
5 | import { Button } from 'components/button/extensions-button'
6 |
7 | const footerWrapper = css`
8 | .pocket-extension &.footer {
9 | background-color: var(--color-canvas);
10 | display: flex;
11 | justify-content: space-between;
12 | border-top: 1px solid var(--color-dividerTertiary);
13 | margin: 10px 0 0 0;
14 | padding: 18px 0 8px;
15 | }
16 |
17 | .icon {
18 | display: inline-block;
19 | height: 25px;
20 | width: 25px;
21 | margin: 0 8px 0 0;
22 | border: none;
23 | background-color: transparent;
24 | pointer-events: none;
25 | vertical-align: middle;
26 |
27 | svg {
28 | height: 25px;
29 | width: 25px;
30 | }
31 | }
32 |
33 | .buttonLink {
34 | color: var(--color-textPrimary);
35 |
36 | &:hover {
37 | color: var(--color-actionPrimary);
38 | }
39 | }
40 | `
41 |
42 | export const Footer = ({ myListClick, settingsClick }) => {
43 | return (
44 |
53 | )
54 | }
55 |
--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 3,
3 | "name": "Save to Pocket",
4 | "default_locale": "en",
5 | "icons": {
6 | "16": "assets/images/icon-16.png",
7 | "48": "assets/images/icon-48.png",
8 | "128": "assets/images/icon-128.png"
9 | },
10 | "action": {
11 | "default_icon": {
12 | "38": "assets/images/action-icon.png"
13 | },
14 | "default_title": "Save to Pocket"
15 | },
16 | "background": {
17 | "service_worker": "pages/background/index.js"
18 | },
19 | "options_page": "pages/options/options.html",
20 | "content_scripts": [
21 | {
22 | "matches": [
23 | "*://*/*"
24 | ],
25 | "js": [
26 | "pages/injector/content.js"
27 | ],
28 | "css": [
29 | "assets/fonts/fonts.css",
30 | "assets/pocket-save-extension.css"
31 | ]
32 | },
33 | {
34 | "matches": [
35 | "*://getpocket.com/extension_login_success*"
36 | ],
37 | "js": [
38 | "pages/login.js"
39 | ]
40 | },
41 | {
42 | "matches": [
43 | "*://getpocket.com/login?e=4"
44 | ],
45 | "js": [
46 | "pages/logout.js"
47 | ]
48 | }
49 | ],
50 | "host_permissions": [
51 | "*://getpocket.com/*"
52 | ],
53 | "permissions": [
54 | "tabs",
55 | "contextMenus",
56 | "cookies",
57 | "storage"
58 | ],
59 | "commands": {
60 | "save-to-pocket-action": {
61 | "suggested_key": {
62 | "default": "Ctrl+Shift+P",
63 | "windows": "Ctrl+Shift+P",
64 | "mac": "Command+Shift+P",
65 | "chromeos": "Ctrl+Shift+P",
66 | "linux": "Ctrl+Shift+P"
67 | },
68 | "description": "Save page to Pocket"
69 | }
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/common/api/_request/request.js:
--------------------------------------------------------------------------------
1 | import { CONSUMER_KEY, API_URL } from 'common/constants'
2 | import { Base64 } from 'js-base64'
3 | import { getSetting } from '../../interface'
4 | import { getAccessToken } from '../../helpers'
5 |
6 | /* Helper Functions
7 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
8 |
9 | async function request(options, skipAuth) {
10 | if (!CONSUMER_KEY) throw new Error('Invalid Auth Key')
11 | if (!skipAuth) options.data.access_token = await getAccessToken()
12 |
13 | options.data.consumer_key = CONSUMER_KEY
14 |
15 | const headers = new Headers({
16 | 'X-Accept': 'application/json',
17 | 'Content-Type': 'application/json',
18 | })
19 |
20 | //?? Is there any way to access this anymore since we no longer use cookie/local storage
21 | //?? We never set this parameter anywhere; propose we delete this block
22 | const serverAuth = await getSetting('base_server_auth')
23 | if (serverAuth) {
24 | headers.append('Authorization', 'Basic ' + Base64.encode(serverAuth))
25 | }
26 |
27 | const fetchSettings = {
28 | method: 'POST',
29 | headers: headers,
30 | body: JSON.stringify(options.data),
31 | }
32 |
33 | return fetch(API_URL + options.path, fetchSettings)
34 | .then(handleErrors)
35 | .then(handleSuccess)
36 | }
37 |
38 | function handleErrors(response) {
39 | const xErrorCode = response.headers.get('x-error-code')
40 | const xError = response.headers.get('x-error')
41 |
42 | // We can reject with the error code and message for better handling
43 | if (!response.ok) return Promise.reject({ xErrorCode, xError })
44 |
45 | return response
46 | }
47 |
48 | function handleSuccess(response) {
49 | return response ? response.json() : false
50 | }
51 |
52 | export { request }
53 |
--------------------------------------------------------------------------------
/src/pages/login.js:
--------------------------------------------------------------------------------
1 | import { sendMessage } from 'common/interface'
2 | import { AUTH_CODE_RECEIVED } from 'actions'
3 |
4 | // Check page has loaded and if not add listener for it
5 | if (document.readyState === 'loading') {
6 | document.addEventListener('DOMContentLoaded', setLoginLoaded)
7 | } else {
8 | setLoginLoaded()
9 | }
10 |
11 | async function setLoginLoaded() {
12 | try {
13 | const siteCookies = getCookies(document.cookie)
14 |
15 | if (!siteCookies['sess_user_id'] || !siteCookies['sess_exttok']) {
16 | console.groupCollapsed('Auth Error')
17 | console.log({
18 | userId: siteCookies['sess_user_id'],
19 | token: siteCookies['sess_exttok']
20 | })
21 | console.groupEnd('Auth Error')
22 | }
23 |
24 | const loginMessage = {
25 | userId: siteCookies['sess_user_id'],
26 | token: siteCookies['sess_exttok'],
27 | }
28 |
29 | // This time out is for user experience so they don't get a flash of
30 | // a page with no context, since we close this page after getting this data
31 | setTimeout(function () {
32 | sendMessage({
33 | type: AUTH_CODE_RECEIVED,
34 | payload: loginMessage,
35 | })
36 | }, 1500)
37 | } catch (err) {
38 | console.log('Unexpected login error', err)
39 | }
40 | }
41 |
42 | /* UTILITIES
43 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
44 | function getCookies(cookieString) {
45 | if (!cookieString || cookieString === '') return {}
46 | return cookieString
47 | .split(';')
48 | .map((x) => x.trim().split(/(=)/))
49 | .reduce(
50 | (cookiesObject, currentArray) => ({
51 | ...cookiesObject,
52 | [currentArray[0]]: decodeURIComponent(currentArray[2]),
53 | }),
54 | {},
55 | )
56 | }
57 |
--------------------------------------------------------------------------------
/src/components/tagging/tagging.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Tagging as TaggingComponent } from './tagging'
3 |
4 | export default {
5 | title: 'Components/Tagging',
6 | };
7 |
8 | const usedTags = ['test', 'space']
9 | const markedTags = ['space']
10 | const suggestedTags = ['pink elephants', 'lava lamps']
11 | const storedTags = ['jamba','juice','donut','time','perturbedly','uxoriousness','chromogenic','creasiest','dartingness','rippingly','glabellar','auckland','wyoming','luanda','prebesetting','member','watershed','grooveless','inept','balletomane','desdemona','isodimorphous','fishybacking','vip']
12 | const addTag = () => {}
13 | const activateTag = () => {}
14 | const deactivateTag = () => {}
15 | const deactivateTags = () => {}
16 | const removeTag = () => {}
17 | const removeTags = () => {}
18 | const closePanel = () => {}
19 |
20 | export const Tagging = () => {
21 | return (
22 | - {listItems()}
68 |
79 | )
80 | }
81 |
82 | Suggestions.propTypes = {
83 | suggestions: PropTypes.array,
84 | addTag: PropTypes.func,
85 | used: PropTypes.array
86 | }
87 |
--------------------------------------------------------------------------------
/src/common/_mocks/tags.js:
--------------------------------------------------------------------------------
1 | export const CHEMICAL_ELEMENTS = [
2 | 'Hydrogen',
3 | 'Helium',
4 | 'Lithium',
5 | 'Beryllium',
6 | 'Boron',
7 | 'Carbon',
8 | 'Nitrogen',
9 | 'Oxygen',
10 | 'Fluorine',
11 | 'Neon',
12 | 'Sodium',
13 | 'Magnesium',
14 | 'Aluminum',
15 | 'Silicon',
16 | 'Phosphorus',
17 | 'Sulfur',
18 | 'Chlorine',
19 | 'Argon',
20 | 'Potassium',
21 | 'Calcium',
22 | 'Scandium',
23 | 'Titanium',
24 | 'Vanadium',
25 | 'Chromium',
26 | 'Manganese',
27 | 'Iron',
28 | 'Cobalt',
29 | 'Nickel',
30 | 'Copper',
31 | 'Zinc',
32 | 'Gallium',
33 | 'Germanium',
34 | 'Arsenic',
35 | 'Selenium',
36 | 'Bromine',
37 | 'Krypton',
38 | 'Rubidium',
39 | 'Strontium',
40 | 'Yttrium',
41 | 'Zirconium',
42 | 'Niobium',
43 | 'Molybdenum',
44 | 'Technetium',
45 | 'Ruthenium',
46 | 'Rhodium',
47 | 'Palladium',
48 | 'Silver',
49 | 'Cadmium',
50 | 'Indium',
51 | 'Tin',
52 | 'Antimony',
53 | 'Tellurium',
54 | 'Iodine',
55 | 'Xenon',
56 | 'Cesium',
57 | 'Barium',
58 | 'Lanthanum',
59 | 'Cerium',
60 | 'Praseodymium',
61 | 'Neodymium',
62 | 'Promethium',
63 | 'Samarium',
64 | 'Europium',
65 | 'Gadolinium',
66 | 'Terbium',
67 | 'Dysprosium',
68 | 'Holmium',
69 | 'Erbium',
70 | 'Thulium',
71 | 'Ytterbium',
72 | 'Lutetium',
73 | 'Hafnium',
74 | 'Tantalum',
75 | 'Tungsten',
76 | 'Rhenium',
77 | 'Osmium',
78 | 'Iridium',
79 | 'Platinum',
80 | 'Gold',
81 | 'Mercury',
82 | 'Thallium',
83 | 'Lead',
84 | 'Bismuth',
85 | 'Polonium',
86 | 'Astatine',
87 | 'Radon',
88 | 'Francium',
89 | 'Radium',
90 | 'Actinium',
91 | 'Thorium',
92 | 'Protactinium',
93 | 'Uranium',
94 | 'Neptunium',
95 | 'Plutonium',
96 | 'Americium',
97 | 'Curium',
98 | 'Berkelium',
99 | 'Californium',
100 | 'Einsteinium',
101 | 'Fermium',
102 | 'Mendelevium',
103 | 'Nobelium',
104 | 'Lawrencium',
105 | 'Rutherfordium',
106 | 'Dubnium',
107 | 'Seaborgium',
108 | 'Bohrium',
109 | 'Hassium',
110 | 'Meitnerium',
111 | 'Darmstadtium',
112 | 'Roentgenium',
113 | 'Ununbium',
114 | 'Ununtrium',
115 | 'Ununquadium',
116 | 'Ununpentium',
117 | 'Ununhexium',
118 | 'Ununseptium',
119 | 'Ununoctium'
120 | ]
121 |
--------------------------------------------------------------------------------
/src/components/loading/loading.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { css, cx } from 'linaria'
3 |
4 | const loadingWrapper = css`
5 | display: inline-flex;
6 | justify-content: center;
7 |
8 | svg {
9 | display: block;
10 | width: 6px;
11 | height: 6px;
12 | margin: 0 1.5px;
13 | fill: currentColor;
14 | }
15 | .shape {
16 | display: inline-block;
17 | animation: float 1.6s infinite cubic-bezier(0.44, 0.15, 0.59, 0.89) both;
18 | }
19 | .round {
20 | svg {
21 | fill: var(--color-actionBrand);
22 | }
23 | animation-delay: -0.84s;
24 | }
25 | .point {
26 | svg {
27 | transform-origin: 4px 5px;
28 | width: 8px;
29 | height: 8px;
30 | margin-top: -1px;
31 | fill: var(--color-amber);
32 | animation: spinPoint 1.6s infinite ease-in-out forwards;
33 | }
34 | animation-delay: -0.42s;
35 | }
36 | .block {
37 | svg {
38 | margin-bottom: 1px;
39 | animation: spinBlock 1.6s infinite ease-in-out forwards;
40 | fill: #116a65;
41 | }
42 | }
43 |
44 | @keyframes float {
45 | 0%,
46 | 70%,
47 | 100% {
48 | transform: translateY(0);
49 | }
50 | 35% {
51 | transform: translateY(-10px);
52 | }
53 | }
54 |
55 | @keyframes spinPoint {
56 | 0% {
57 | transform: rotate(0deg);
58 | }
59 | 40% {
60 | transform: rotate(120deg);
61 | }
62 | 100% {
63 | transform: rotate(120deg);
64 | }
65 | }
66 |
67 | @keyframes spinBlock {
68 | 0% {
69 | transform: rotate(0deg);
70 | }
71 | 60% {
72 | transform: rotate(90deg);
73 | }
74 | 100% {
75 | transform: rotate(90deg);
76 | }
77 | }
78 | `
79 |
80 | export const Loading = ({ className }) => {
81 | return (
82 |
99 | )
100 | }
101 |
--------------------------------------------------------------------------------
/src/common/locales.js:
--------------------------------------------------------------------------------
1 | import de from '_locales/de/messages.json'
2 | import en from '_locales/en/messages.json'
3 | import es from '_locales/es/messages.json'
4 | import es_419 from '_locales/es_419/messages.json'
5 | import fr from '_locales/fr/messages.json'
6 | import it from '_locales/it/messages.json'
7 | import ja from '_locales/ja/messages.json'
8 | import ko from '_locales/ko/messages.json'
9 | import nl from '_locales/nl/messages.json'
10 | import pl from '_locales/pl/messages.json'
11 | import pt_BR from '_locales/pt_BR/messages.json'
12 | import pt_PT from '_locales/pt_PT/messages.json'
13 | import ru from '_locales/ru/messages.json'
14 | import zh_CN from '_locales/zh_CN/messages.json'
15 | import zh_TW from '_locales/zh_TW/messages.json'
16 |
17 | function getCurrentLanguageCode() {
18 | var language = navigator.languages
19 | ? navigator.languages[0]
20 | : navigator.language || navigator.userLanguage
21 |
22 | language = typeof language !== 'undefined' ? language.toLowerCase() : 'en'
23 |
24 | if (language.indexOf('en') === 0) return 'en' // English
25 | if (language.indexOf('de') === 0) return 'de' // German
26 | if (language.indexOf('fr') === 0) return 'fr' // French
27 | if (language.indexOf('it') === 0) return 'it' // Italian
28 | if (language.indexOf('es_419') === 0) return 'es_419' // Spanish (Latin America and Caribbean)
29 | if (language.indexOf('es') === 0) return 'es' // Spanish
30 | if (language.indexOf('ja') === 0) return 'ja' // Japanese
31 | if (language.indexOf('ru') === 0) return 'ru' // Russian
32 | if (language.indexOf('ko') === 0) return 'ko' // Korean
33 | if (language.indexOf('nl') === 0) return 'nl' // Dutch
34 | if (language.indexOf('pl') === 0) return 'pl' // Polish
35 | if (language.indexOf('pt_BR') === 0) return 'pt_BR' // Portuguese Brazil
36 | if (language.indexOf('pt_PT') === 0) return 'pt_PT' // Portuguese Portugal
37 | if (language.indexOf('zh_CN') === 0) return 'zh_CN' // Chinese Simplified
38 | if (language.indexOf('zh_TW') === 0) return 'zh_TW' // Chinese Traditional
39 | return 'en' // Default is English
40 | }
41 |
42 | function localizedStrings() {
43 | const localizedCopy = {
44 | de,
45 | en,
46 | es,
47 | es_419,
48 | fr,
49 | it,
50 | ja,
51 | ko,
52 | nl,
53 | pl,
54 | pt_BR,
55 | pt_PT,
56 | ru,
57 | zh_CN,
58 | zh_TW
59 | }
60 |
61 | const currentLanguage = getCurrentLanguageCode()
62 | return localizedCopy[currentLanguage] || localizedCopy['en']
63 | }
64 |
65 | const currentStrings = localizedStrings()
66 |
67 | export function localize(string) {
68 | return currentStrings[string]?.message
69 | }
70 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "save-to-pocket",
3 | "version": "4.0.6",
4 | "private": true,
5 | "description": "The easiest, fastest way to capture articles, videos, and more.",
6 | "homepage": "https://github.com/Pocket/extension-save-to-pocket#readme",
7 | "bugs": {
8 | "url": "https://github.com/Pocket/extension-save-to-pocketissues"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/Pocket/extension-save-to-pocket.git"
13 | },
14 | "license": "MIT",
15 | "author": "Pocket",
16 | "scripts": {
17 | "build": "NODE_ENV=production rollup -c",
18 | "release": "cross-env NODE_ENV=production IS_RELEASE=true rollup -c",
19 | "start": "rollup -c -w",
20 | "test": "jest",
21 | "storybook": "start-storybook -p 6006",
22 | "build-storybook": "build-storybook"
23 | },
24 | "dependencies": {
25 | "@sentry/react": "^6.16.1",
26 | "@sentry/tracing": "^6.16.1",
27 | "downshift": "^6.1.7",
28 | "js-base64": "^3.7.2",
29 | "linaria": "^3.0.0-beta.13",
30 | "match-sorter": "^6.3.1",
31 | "prop-types": "^15.7.2",
32 | "react": "^17.0.2",
33 | "react-dom": "^17.0.2",
34 | "react-input-autosize": "^3.0.0",
35 | "webextension-polyfill": "^0.8.0"
36 | },
37 | "devDependencies": {
38 | "@babel/cli": "^7.15.7",
39 | "@babel/core": "^7.15.5",
40 | "@babel/preset-env": "^7.15.6",
41 | "@babel/preset-react": "^7.14.5",
42 | "@rollup/plugin-alias": "^3.1.5",
43 | "@rollup/plugin-babel": "^5.3.0",
44 | "@rollup/plugin-commonjs": "^20.0.0",
45 | "@rollup/plugin-html": "^0.2.3",
46 | "@rollup/plugin-json": "^4.1.0",
47 | "@rollup/plugin-node-resolve": "^13.0.5",
48 | "@rollup/plugin-replace": "^3.0.0",
49 | "@storybook/addon-actions": "^6.3.8",
50 | "@storybook/addon-essentials": "^6.3.8",
51 | "@storybook/addon-links": "^6.3.8",
52 | "@storybook/react": "^6.3.8",
53 | "@types/chrome": "^0.0.158",
54 | "@types/firefox-webext-browser": "^82.0.1",
55 | "@types/jest": "^27.0.2",
56 | "@types/react": "^17.0.24",
57 | "@types/react-dom": "^17.0.9",
58 | "babel-loader": "^8.2.2",
59 | "babel-plugin-module-resolver": "^4.1.0",
60 | "cross-env": "^7.0.3",
61 | "eslint": "^7.32.0",
62 | "eslint-plugin-react": "^7.26.0",
63 | "jest": "^27.2.1",
64 | "jest-chrome": "^0.7.2",
65 | "prettier": "^2.4.1",
66 | "rollup": "^2.57.0",
67 | "rollup-plugin-chrome-extension": "^3.6.4",
68 | "rollup-plugin-copy": "^3.4.0",
69 | "rollup-plugin-css-only": "^3.1.0",
70 | "rollup-plugin-empty-dir": "^1.0.5",
71 | "rollup-plugin-zip": "^1.0.3",
72 | "styled-jsx": "^4.0.1"
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/src/components/button/extensions-button.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { css, cx } from 'linaria'
3 |
4 | const buttonStyles = css`
5 | &.pocket-button {
6 | height: unset;
7 | display: inline-block;
8 | position: relative;
9 | font-family: var(--fontSansSerif);
10 | font-size: 16px;
11 | line-height: 110%;
12 | border: none;
13 | border-radius: 0.25rem;
14 | margin: 0;
15 | padding: 8px 12px;
16 | transition: all 0.15s ease-out;
17 | text-decoration: none;
18 | text-transform: none;
19 | cursor: pointer;
20 | }
21 |
22 | &.disabled {
23 | pointer-events: none;
24 | cursor: default;
25 | opacity: 0.5;
26 | }
27 |
28 | &:focus {
29 | outline: none;
30 |
31 | &::before {
32 | content: '';
33 | position: absolute;
34 | border: 2px solid var(--color-actionFocus);
35 | top: -4px;
36 | bottom: -4px;
37 | left: -4px;
38 | right: -4px;
39 | border-radius: 0.5rem;
40 | }
41 | }
42 |
43 | &:hover {
44 | text-decoration: none;
45 |
46 | &::before {
47 | display: none;
48 | }
49 | }
50 |
51 | &:active {
52 | &::before {
53 | display: none;
54 | }
55 | }
56 |
57 | &.primary {
58 | background-color: var(--color-actionPrimary);
59 | border: 2px solid var(--color-actionPrimary);
60 | color: var(--color-actionPrimaryText);
61 |
62 | &:hover {
63 | background-color: var(--color-actionPrimaryHover);
64 | border-color: var(--color-actionPrimaryHover);
65 | }
66 | }
67 |
68 | &.secondary {
69 | background: none;
70 | border: 2px solid var(--color-actionSecondary);
71 | color: var(--color-actionSecondaryText);
72 |
73 | &:focus {
74 | &::before {
75 | /* offsets adjusted for space taken by outline */
76 | top: -6px;
77 | bottom: -6px;
78 | left: -6px;
79 | right: -6px;
80 | }
81 | }
82 | &:hover {
83 | background-color: var(--color-actionSecondaryHover);
84 | color: var(--color-actionSecondaryHoverText);
85 | }
86 | }
87 |
88 | &.inline {
89 | display: inline;
90 | background: none;
91 | padding: 0;
92 | color: var(--color-inlineButton);
93 | font-size: 14px;
94 | font-weight: 500;
95 |
96 | &:focus {
97 | outline: inherit;
98 |
99 | &::before {
100 | display: none;
101 | }
102 | }
103 |
104 | &:hover {
105 | color: var(--color-inlineButtonHover);
106 | }
107 | }
108 | `
109 |
110 | export const Button = ({children, onClick, type = 'primary', className}) => {
111 | return (
112 |
115 | )
116 | }
117 |
--------------------------------------------------------------------------------
/src/pages/background/postSave.js:
--------------------------------------------------------------------------------
1 | import { setToolbarIcon } from 'common/interface'
2 | import { fetchStoredTags, getOnSaveTags } from 'common/api'
3 | import { getSetting, setSettings } from 'common/interface'
4 | import { deriveItemData } from 'common/helpers'
5 |
6 | import { UPDATE_ITEM_PREVIEW } from 'actions'
7 | import { UPDATE_STORED_TAGS } from 'actions'
8 | import { SUGGESTED_TAGS_SUCCESS } from 'actions'
9 |
10 | /* On successful save
11 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
12 | export async function saveSuccess(tabId, payload) {
13 | // Update toolbar icon
14 | const { resolved_url, given_url, isLink } = payload
15 | // fetch image and title from above
16 | const url = resolved_url || given_url //eslint-disable-line
17 |
18 | if (!isLink) setToolbarIcon(tabId, true)
19 |
20 | // Get item preview
21 | getItemPreview(tabId, payload)
22 |
23 | // Get list of users tags for typeahead
24 | getStoredTags(tabId)
25 |
26 | // Premium: Request suggested tags
27 | getTagSuggestions(url, tabId)
28 | }
29 |
30 | /* Derive item preview from save response
31 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
32 | async function getItemPreview(tabId, payload) {
33 | const item = await deriveItemData(payload)
34 |
35 | chrome.tabs.sendMessage(tabId, {
36 | action: UPDATE_ITEM_PREVIEW,
37 | payload: { item },
38 | })
39 | }
40 |
41 | /* Get stored tags
42 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
43 | async function getStoredTags(tabId) {
44 | // Check for server tags
45 | const fetchedSince = (await getSetting('tags_fetched_timestamp')) || 0
46 | const fetchTags = await fetchStoredTags(fetchedSince)
47 | const fetchedTags = fetchTags ? fetchTags.tags || [] : []
48 | const tagsFromSettings = await getSetting('tags_stored')
49 | const parsedTags = tagsFromSettings ? JSON.parse(tagsFromSettings) : []
50 | const tags_stored = [...new Set([].concat(...parsedTags, ...fetchedTags))]
51 | const tags = JSON.stringify(tags_stored)
52 |
53 | setSettings({
54 | tags_stored: tags,
55 | tags_fetched_timestamp: Date.now(),
56 | })
57 |
58 | chrome.tabs.sendMessage(tabId, {
59 | action: UPDATE_STORED_TAGS,
60 | payload: { tags: tags_stored },
61 | })
62 | }
63 |
64 | /* Get suggested tags for premium users
65 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
66 | async function getTagSuggestions(url, tabId) {
67 | const premiumStatus = await getSetting('premium_status')
68 | if (premiumStatus !== '1') return
69 |
70 | try {
71 | const response = await getOnSaveTags(url)
72 | const suggestedTags = response
73 | ? response.suggested_tags.map((tag) => tag.tag)
74 | : []
75 |
76 | if (response) {
77 | chrome.tabs.sendMessage(tabId, {
78 | action: SUGGESTED_TAGS_SUCCESS,
79 | payload: { suggestedTags },
80 | })
81 | }
82 | } catch (err) {
83 | console.info(err?.xError)
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/src/components/heading/heading.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { css, cx } from 'linaria'
3 | import { PocketLogoIcon } from 'components/icons/icons'
4 | import { Loading } from 'components/loading/loading'
5 | import { ErrorIcon } from 'components/icons/icons'
6 | import { Button } from 'components/button/extensions-button'
7 |
8 | const headingStyle = css`
9 | .pocket-extension &.header {
10 | display: flex;
11 | justify-content: space-between;
12 | background-color: var(--color-headingBackground);
13 | border-radius: 30px;
14 | padding: 15px 20px 15px 10px;
15 | font-size: 16px;
16 | }
17 |
18 | .save-status {
19 | display: flex;
20 | }
21 |
22 | .icon-wrapper {
23 | display: flex;
24 | justify-content: center;
25 | align-items: center;
26 | width: 40px;
27 | min-height: 25px;
28 | margin-right: 15px;
29 | }
30 |
31 | .icon {
32 | height: 25px;
33 | width: 25px;
34 | margin-top: 0;
35 | border: none;
36 | background-color: transparent;
37 | pointer-events: none;
38 |
39 | svg {
40 | height: 25px;
41 | width: 25px;
42 | }
43 | }
44 |
45 | .saveBlock {
46 | display: inline-flex;
47 | align-items: center;
48 | color: var(--color-textPrimary);
49 | font-family: var(--fontSansSerif);
50 | font-size: 16px;
51 | font-weight: 600;
52 | }
53 |
54 | button.inline {
55 | text-decoration: none;
56 | color: var(--color-inlineButton);
57 | &:hover {
58 | text-decoration: underline;
59 | }
60 | }
61 |
62 | &.error {
63 | background-color: var(--color-headingErrorBackground);
64 |
65 | .saveBlock, .icon {
66 | color: var(--color-headingIcon);
67 | }
68 | }
69 | `
70 |
71 | export const Heading = ({ saveStatus, removeAction, saveAction }) => {
72 | const loadingStatus = ['saving', 'removing', 'tags_saving']
73 | const isLoading = loadingStatus.includes(saveStatus)
74 |
75 | const errorStatus = ['save_failed', 'remove_failed', 'tags_failed', 'tags_error', 'error']
76 | const hasError = errorStatus.includes(saveStatus)
77 |
78 | return (
79 | -
69 | {suggestions.map((suggestion, index) => (
70 |
81 |
88 | {!hasError && saveStatus !== 'removed' ? (
89 |
90 | ) : null}
91 | {saveStatus === 'removed' ? (
92 |
93 | ) : null}
94 |
82 | { isLoading ?
86 | {chrome.i18n.getMessage(`heading_${saveStatus}`)}
87 |