ਇੱਕ ਸੁਰੱਖਿਅਤ ਬਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਲਿਖਣਾ

ਆਮ "ਕਲਾਇੰਟ-ਸਰਵਰ" ਆਰਕੀਟੈਕਚਰ ਦੇ ਉਲਟ, ਵਿਕੇਂਦਰੀਕ੍ਰਿਤ ਐਪਲੀਕੇਸ਼ਨਾਂ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ:

• ਉਪਭੋਗਤਾ ਲੌਗਿਨ ਅਤੇ ਪਾਸਵਰਡਾਂ ਦੇ ਨਾਲ ਇੱਕ ਡੇਟਾਬੇਸ ਨੂੰ ਸਟੋਰ ਕਰਨ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ ਹੈ. ਪਹੁੰਚ ਜਾਣਕਾਰੀ ਨੂੰ ਸਿਰਫ਼ ਉਪਭੋਗਤਾਵਾਂ ਦੁਆਰਾ ਹੀ ਸਟੋਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਉਹਨਾਂ ਦੀ ਪ੍ਰਮਾਣਿਕਤਾ ਦੀ ਪੁਸ਼ਟੀ ਪ੍ਰੋਟੋਕੋਲ ਪੱਧਰ 'ਤੇ ਹੁੰਦੀ ਹੈ।
• ਸਰਵਰ ਵਰਤਣ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ। ਐਪਲੀਕੇਸ਼ਨ ਤਰਕ ਨੂੰ ਇੱਕ ਬਲਾਕਚੈਨ ਨੈਟਵਰਕ ਤੇ ਚਲਾਇਆ ਜਾ ਸਕਦਾ ਹੈ, ਜਿੱਥੇ ਲੋੜੀਂਦੀ ਮਾਤਰਾ ਵਿੱਚ ਡੇਟਾ ਨੂੰ ਸਟੋਰ ਕਰਨਾ ਸੰਭਵ ਹੈ।

ਉਪਭੋਗਤਾ ਕੁੰਜੀਆਂ ਲਈ 2 ਮੁਕਾਬਲਤਨ ਸੁਰੱਖਿਅਤ ਸਟੋਰੇਜ ਹਨ - ਹਾਰਡਵੇਅਰ ਵਾਲਿਟ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ। ਹਾਰਡਵੇਅਰ ਵਾਲਿਟ ਜ਼ਿਆਦਾਤਰ ਬਹੁਤ ਸੁਰੱਖਿਅਤ ਹੁੰਦੇ ਹਨ, ਪਰ ਵਰਤਣ ਵਿੱਚ ਮੁਸ਼ਕਲ ਹੁੰਦੇ ਹਨ ਅਤੇ ਮੁਫਤ ਤੋਂ ਦੂਰ ਹੁੰਦੇ ਹਨ, ਪਰ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਸੁਰੱਖਿਆ ਅਤੇ ਵਰਤੋਂ ਵਿੱਚ ਆਸਾਨੀ ਦਾ ਸੰਪੂਰਨ ਸੁਮੇਲ ਹਨ, ਅਤੇ ਅੰਤਮ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਪੂਰੀ ਤਰ੍ਹਾਂ ਮੁਫਤ ਵੀ ਹੋ ਸਕਦੇ ਹਨ।

ਇਸ ਸਭ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖਦੇ ਹੋਏ, ਅਸੀਂ ਸਭ ਤੋਂ ਸੁਰੱਖਿਅਤ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਸੀ ਜੋ ਟ੍ਰਾਂਜੈਕਸ਼ਨਾਂ ਅਤੇ ਦਸਤਖਤਾਂ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਇੱਕ ਸਧਾਰਨ API ਪ੍ਰਦਾਨ ਕਰਕੇ ਵਿਕੇਂਦਰੀਕ੍ਰਿਤ ਐਪਲੀਕੇਸ਼ਨਾਂ ਦੇ ਵਿਕਾਸ ਨੂੰ ਸਰਲ ਬਣਾਉਂਦਾ ਹੈ।
ਅਸੀਂ ਤੁਹਾਨੂੰ ਹੇਠਾਂ ਇਸ ਅਨੁਭਵ ਬਾਰੇ ਦੱਸਾਂਗੇ।

ਲੇਖ ਵਿੱਚ ਕੋਡ ਉਦਾਹਰਨਾਂ ਅਤੇ ਸਕ੍ਰੀਨਸ਼ੌਟਸ ਦੇ ਨਾਲ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਕਿਵੇਂ ਲਿਖਣਾ ਹੈ ਇਸ ਬਾਰੇ ਕਦਮ-ਦਰ-ਕਦਮ ਨਿਰਦੇਸ਼ ਸ਼ਾਮਲ ਹੋਣਗੇ। ਵਿੱਚ ਤੁਸੀਂ ਸਾਰਾ ਕੋਡ ਲੱਭ ਸਕਦੇ ਹੋ ਰਿਪੋਜ਼ਟਰੀਆਂ. ਹਰੇਕ ਵਚਨਬੱਧਤਾ ਇਸ ਲੇਖ ਦੇ ਇੱਕ ਭਾਗ ਨਾਲ ਮੇਲ ਖਾਂਦੀ ਹੈ।

ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨਾਂ ਦਾ ਸੰਖੇਪ ਇਤਿਹਾਸ

ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਲੰਬੇ ਸਮੇਂ ਤੋਂ ਆਲੇ-ਦੁਆਲੇ ਹਨ। ਉਹ 1999 ਵਿੱਚ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ ਵਿੱਚ, 2004 ਵਿੱਚ ਫਾਇਰਫਾਕਸ ਵਿੱਚ ਪ੍ਰਗਟ ਹੋਏ। ਹਾਲਾਂਕਿ, ਬਹੁਤ ਲੰਬੇ ਸਮੇਂ ਲਈ ਐਕਸਟੈਂਸ਼ਨਾਂ ਲਈ ਕੋਈ ਇੱਕ ਮਾਪਦੰਡ ਨਹੀਂ ਸੀ.

ਅਸੀਂ ਕਹਿ ਸਕਦੇ ਹਾਂ ਕਿ ਇਹ ਗੂਗਲ ਕਰੋਮ ਦੇ ਚੌਥੇ ਸੰਸਕਰਣ ਵਿੱਚ ਐਕਸਟੈਂਸ਼ਨਾਂ ਦੇ ਨਾਲ ਪ੍ਰਗਟ ਹੋਇਆ ਹੈ। ਬੇਸ਼ੱਕ, ਉਦੋਂ ਕੋਈ ਨਿਰਧਾਰਨ ਨਹੀਂ ਸੀ, ਪਰ ਇਹ ਕ੍ਰੋਮ API ਸੀ ਜੋ ਇਸਦਾ ਅਧਾਰ ਬਣ ਗਿਆ: ਜ਼ਿਆਦਾਤਰ ਬ੍ਰਾਊਜ਼ਰ ਮਾਰਕੀਟ ਨੂੰ ਜਿੱਤਣ ਅਤੇ ਇੱਕ ਬਿਲਟ-ਇਨ ਐਪਲੀਕੇਸ਼ਨ ਸਟੋਰ ਹੋਣ ਦੇ ਬਾਅਦ, ਕ੍ਰੋਮ ਨੇ ਅਸਲ ਵਿੱਚ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨਾਂ ਲਈ ਸਟੈਂਡਰਡ ਸੈੱਟ ਕੀਤਾ।

ਮੋਜ਼ੀਲਾ ਦਾ ਆਪਣਾ ਸਟੈਂਡਰਡ ਸੀ, ਪਰ ਕ੍ਰੋਮ ਐਕਸਟੈਂਸ਼ਨਾਂ ਦੀ ਪ੍ਰਸਿੱਧੀ ਨੂੰ ਦੇਖਦੇ ਹੋਏ, ਕੰਪਨੀ ਨੇ ਇੱਕ ਅਨੁਕੂਲ API ਬਣਾਉਣ ਦਾ ਫੈਸਲਾ ਕੀਤਾ। 2015 ਵਿੱਚ, ਮੋਜ਼ੀਲਾ ਦੀ ਪਹਿਲਕਦਮੀ 'ਤੇ, ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ 'ਤੇ ਕੰਮ ਕਰਨ ਲਈ ਵਰਲਡ ਵਾਈਡ ਵੈੱਬ ਕੰਸੋਰਟੀਅਮ (W3C) ਦੇ ਅੰਦਰ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਸਮੂਹ ਬਣਾਇਆ ਗਿਆ ਸੀ।

Chrome ਲਈ ਮੌਜੂਦਾ API ਐਕਸਟੈਂਸ਼ਨਾਂ ਨੂੰ ਆਧਾਰ ਵਜੋਂ ਲਿਆ ਗਿਆ ਸੀ। ਇਹ ਕੰਮ ਮਾਈਕਰੋਸਾਫਟ ਦੇ ਸਮਰਥਨ ਨਾਲ ਕੀਤਾ ਗਿਆ ਸੀ (ਗੂਗਲ ਨੇ ਸਟੈਂਡਰਡ ਦੇ ਵਿਕਾਸ ਵਿੱਚ ਹਿੱਸਾ ਲੈਣ ਤੋਂ ਇਨਕਾਰ ਕਰ ਦਿੱਤਾ), ਅਤੇ ਨਤੀਜੇ ਵਜੋਂ ਇੱਕ ਡਰਾਫਟ ਪ੍ਰਗਟ ਹੋਇਆ ਨਿਰਧਾਰਨ.

ਰਸਮੀ ਤੌਰ 'ਤੇ, ਸਪੈਸੀਫਿਕੇਸ਼ਨ ਐਜ, ਫਾਇਰਫਾਕਸ ਅਤੇ ਓਪੇਰਾ ਦੁਆਰਾ ਸਮਰਥਿਤ ਹੈ (ਨੋਟ ਕਰੋ ਕਿ ਕ੍ਰੋਮ ਇਸ ਸੂਚੀ ਵਿੱਚ ਨਹੀਂ ਹੈ)। ਪਰ ਵਾਸਤਵ ਵਿੱਚ, ਸਟੈਂਡਰਡ ਵੱਡੇ ਪੱਧਰ 'ਤੇ Chrome ਨਾਲ ਅਨੁਕੂਲ ਹੈ, ਕਿਉਂਕਿ ਇਹ ਅਸਲ ਵਿੱਚ ਇਸਦੇ ਐਕਸਟੈਂਸ਼ਨਾਂ ਦੇ ਅਧਾਰ ਤੇ ਲਿਖਿਆ ਗਿਆ ਹੈ। ਤੁਸੀਂ WebExtensions API ਬਾਰੇ ਹੋਰ ਪੜ੍ਹ ਸਕਦੇ ਹੋ ਇੱਥੇ.

ਐਕਸਟੈਂਸ਼ਨ ਬਣਤਰ

ਐਕਸਟੈਂਸ਼ਨ ਲਈ ਲੋੜੀਂਦੀ ਕੇਵਲ ਫਾਈਲ ਮੈਨੀਫੈਸਟ (manifest.json) ਹੈ। ਇਹ ਵਿਸਥਾਰ ਲਈ "ਐਂਟਰੀ ਪੁਆਇੰਟ" ਵੀ ਹੈ।

ਪ੍ਰਗਟ

ਨਿਰਧਾਰਨ ਦੇ ਅਨੁਸਾਰ, ਮੈਨੀਫੈਸਟ ਫਾਈਲ ਇੱਕ ਵੈਧ JSON ਫਾਈਲ ਹੈ। ਮੈਨੀਫੈਸਟ ਕੁੰਜੀਆਂ ਦਾ ਪੂਰਾ ਵੇਰਵਾ ਇਸ ਬਾਰੇ ਜਾਣਕਾਰੀ ਦੇ ਨਾਲ ਕਿ ਕਿਹੜੀਆਂ ਕੁੰਜੀਆਂ ਸਮਰਥਿਤ ਹਨ ਜਿਸ ਵਿੱਚ ਬ੍ਰਾਊਜ਼ਰ ਦੇਖਿਆ ਜਾ ਸਕਦਾ ਹੈ ਇੱਥੇ.

ਕੁੰਜੀਆਂ ਜੋ ਨਿਰਧਾਰਨ ਵਿੱਚ ਨਹੀਂ ਹਨ "ਹੋ ਸਕਦਾ ਹੈ" ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ (ਦੋਵੇਂ ਕਰੋਮ ਅਤੇ ਫਾਇਰਫਾਕਸ ਰਿਪੋਰਟ ਦੀਆਂ ਤਰੁੱਟੀਆਂ, ਪਰ ਐਕਸਟੈਂਸ਼ਨ ਕੰਮ ਕਰਨਾ ਜਾਰੀ ਰੱਖਦੇ ਹਨ)।

ਅਤੇ ਮੈਂ ਕੁਝ ਨੁਕਤਿਆਂ ਵੱਲ ਧਿਆਨ ਖਿੱਚਣਾ ਚਾਹਾਂਗਾ।

1. ਪਿਛੋਕੜ — ਇੱਕ ਵਸਤੂ ਜਿਸ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤੇ ਖੇਤਰ ਸ਼ਾਮਲ ਹਨ:
   1. ਸਕ੍ਰਿਪਟਾਂ — ਸਕ੍ਰਿਪਟਾਂ ਦਾ ਇੱਕ ਐਰੇ ਜੋ ਬੈਕਗ੍ਰਾਉਂਡ ਸੰਦਰਭ ਵਿੱਚ ਚਲਾਇਆ ਜਾਵੇਗਾ (ਅਸੀਂ ਇਸ ਬਾਰੇ ਥੋੜ੍ਹੀ ਦੇਰ ਬਾਅਦ ਗੱਲ ਕਰਾਂਗੇ);
   2. ਪੰਨਾ - ਸਕ੍ਰਿਪਟਾਂ ਦੀ ਬਜਾਏ ਜੋ ਇੱਕ ਖਾਲੀ ਪੰਨੇ ਵਿੱਚ ਚਲਾਈਆਂ ਜਾਣਗੀਆਂ, ਤੁਸੀਂ ਸਮੱਗਰੀ ਦੇ ਨਾਲ html ਨਿਸ਼ਚਿਤ ਕਰ ਸਕਦੇ ਹੋ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਸਕ੍ਰਿਪਟ ਖੇਤਰ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ, ਅਤੇ ਸਕ੍ਰਿਪਟਾਂ ਨੂੰ ਸਮੱਗਰੀ ਪੰਨੇ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ;
   3. ਜਾਰੀ - ਇੱਕ ਬਾਈਨਰੀ ਫਲੈਗ, ਜੇਕਰ ਨਿਰਧਾਰਤ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਹੈ, ਤਾਂ ਬ੍ਰਾਊਜ਼ਰ ਬੈਕਗ੍ਰਾਉਂਡ ਪ੍ਰਕਿਰਿਆ ਨੂੰ "ਮਾਰ" ਦੇਵੇਗਾ ਜਦੋਂ ਇਹ ਸਮਝਦਾ ਹੈ ਕਿ ਇਹ ਕੁਝ ਨਹੀਂ ਕਰ ਰਿਹਾ ਹੈ, ਅਤੇ ਜੇ ਲੋੜ ਹੋਵੇ ਤਾਂ ਇਸਨੂੰ ਮੁੜ ਚਾਲੂ ਕਰ ਦੇਵੇਗਾ। ਨਹੀਂ ਤਾਂ, ਬ੍ਰਾਊਜ਼ਰ ਬੰਦ ਹੋਣ 'ਤੇ ਹੀ ਪੰਨਾ ਅਨਲੋਡ ਕੀਤਾ ਜਾਵੇਗਾ। ਫਾਇਰਫਾਕਸ ਵਿੱਚ ਸਮਰਥਿਤ ਨਹੀਂ ਹੈ।
2. ਸਮੱਗਰੀ_ਸਕ੍ਰਿਪਟਾਂ — ਵਸਤੂਆਂ ਦੀ ਇੱਕ ਲੜੀ ਜੋ ਤੁਹਾਨੂੰ ਵੱਖ-ਵੱਖ ਵੈੱਬ ਪੰਨਿਆਂ 'ਤੇ ਵੱਖ-ਵੱਖ ਸਕ੍ਰਿਪਟਾਂ ਨੂੰ ਲੋਡ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀ ਹੈ। ਹਰੇਕ ਵਸਤੂ ਵਿੱਚ ਹੇਠ ਲਿਖੇ ਮਹੱਤਵਪੂਰਨ ਖੇਤਰ ਹੁੰਦੇ ਹਨ:
   1. ਮੈਚ - ਪੈਟਰਨ url, ਜੋ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਕੀ ਇੱਕ ਖਾਸ ਸਮੱਗਰੀ ਸਕ੍ਰਿਪਟ ਸ਼ਾਮਲ ਕੀਤੀ ਜਾਵੇਗੀ ਜਾਂ ਨਹੀਂ।
   2. js — ਸਕ੍ਰਿਪਟਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਜੋ ਇਸ ਮੈਚ ਵਿੱਚ ਲੋਡ ਕੀਤੀਆਂ ਜਾਣਗੀਆਂ;
   3. exclude_maches - ਖੇਤਰ ਤੋਂ ਬਾਹਰ ਰੱਖਿਆ ਗਿਆ ਹੈ match URL ਜੋ ਇਸ ਖੇਤਰ ਨਾਲ ਮੇਲ ਖਾਂਦੇ ਹਨ।
3. ਪੰਨਾ_ਕਾਰਵਾਈ - ਅਸਲ ਵਿੱਚ ਇੱਕ ਵਸਤੂ ਹੈ ਜੋ ਆਈਕਨ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਹੈ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਐਡਰੈੱਸ ਬਾਰ ਦੇ ਅੱਗੇ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ ਅਤੇ ਇਸਦੇ ਨਾਲ ਪਰਸਪਰ ਪ੍ਰਭਾਵ ਹੁੰਦਾ ਹੈ। ਇਹ ਤੁਹਾਨੂੰ ਇੱਕ ਪੌਪਅੱਪ ਵਿੰਡੋ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਦੀ ਵੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਜੋ ਤੁਹਾਡੇ ਆਪਣੇ HTML, CSS ਅਤੇ JS ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ।
   1. default_popup - ਪੌਪਅੱਪ ਇੰਟਰਫੇਸ ਨਾਲ HTML ਫਾਈਲ ਦਾ ਮਾਰਗ, CSS ਅਤੇ JS ਹੋ ਸਕਦਾ ਹੈ।
4. ਅਧਿਕਾਰ — ਐਕਸਟੈਂਸ਼ਨ ਅਧਿਕਾਰਾਂ ਦੇ ਪ੍ਰਬੰਧਨ ਲਈ ਇੱਕ ਐਰੇ। ਅਧਿਕਾਰਾਂ ਦੀਆਂ 3 ਕਿਸਮਾਂ ਹਨ, ਜਿਨ੍ਹਾਂ ਦਾ ਵਿਸਥਾਰ ਵਿੱਚ ਵਰਣਨ ਕੀਤਾ ਗਿਆ ਹੈ ਇੱਥੇ
5. ਵੈੱਬ_ਪਹੁੰਚਯੋਗ_ਸਰੋਤ — ਐਕਸਟੈਂਸ਼ਨ ਸਰੋਤ ਜੋ ਇੱਕ ਵੈੱਬ ਪੰਨਾ ਬੇਨਤੀ ਕਰ ਸਕਦਾ ਹੈ, ਉਦਾਹਰਨ ਲਈ, ਚਿੱਤਰ, JS, CSS, HTML ਫਾਈਲਾਂ।
6. externally_connectable — ਇੱਥੇ ਤੁਸੀਂ ਹੋਰ ਐਕਸਟੈਂਸ਼ਨਾਂ ਅਤੇ ਵੈਬ ਪੇਜਾਂ ਦੇ ਡੋਮੇਨਾਂ ਦੀ ID ਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਨਿਸ਼ਚਿਤ ਕਰ ਸਕਦੇ ਹੋ ਜਿੱਥੋਂ ਤੁਸੀਂ ਕਨੈਕਟ ਕਰ ਸਕਦੇ ਹੋ। ਇੱਕ ਡੋਮੇਨ ਦੂਜਾ ਪੱਧਰ ਜਾਂ ਉੱਚਾ ਹੋ ਸਕਦਾ ਹੈ। ਫਾਇਰਫਾਕਸ ਵਿੱਚ ਕੰਮ ਨਹੀਂ ਕਰਦਾ।

ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਪ੍ਰਸੰਗ

ਐਕਸਟੈਂਸ਼ਨ ਵਿੱਚ ਤਿੰਨ ਕੋਡ ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਪ੍ਰਸੰਗ ਹਨ, ਯਾਨੀ, ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਬ੍ਰਾਊਜ਼ਰ API ਤੱਕ ਪਹੁੰਚ ਦੇ ਵੱਖ-ਵੱਖ ਪੱਧਰਾਂ ਦੇ ਨਾਲ ਤਿੰਨ ਭਾਗ ਹੁੰਦੇ ਹਨ।

ਐਕਸਟੈਂਸ਼ਨ ਸੰਦਰਭ

ਜ਼ਿਆਦਾਤਰ API ਇੱਥੇ ਉਪਲਬਧ ਹਨ। ਇਸ ਸੰਦਰਭ ਵਿੱਚ ਉਹ "ਜੀਉਂਦੇ" ਹਨ:

1. ਪਿਛੋਕੜ ਪੰਨਾ - ਐਕਸਟੈਂਸ਼ਨ ਦਾ "ਬੈਕਐਂਡ" ਹਿੱਸਾ। ਫਾਈਲ ਨੂੰ "ਬੈਕਗ੍ਰਾਉਂਡ" ਕੁੰਜੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਮੈਨੀਫੈਸਟ ਵਿੱਚ ਨਿਰਧਾਰਤ ਕੀਤਾ ਗਿਆ ਹੈ।
2. ਪੌਪਅੱਪ ਪੰਨਾ - ਇੱਕ ਪੌਪਅੱਪ ਪੰਨਾ ਜੋ ਉਦੋਂ ਪ੍ਰਗਟ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਐਕਸਟੈਂਸ਼ਨ ਆਈਕਨ 'ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹੋ। ਮੈਨੀਫੈਸਟੋ ਵਿੱਚ browser_action -> default_popup.
3. ਵਿਉਂਤਿਆ ਪੰਨਾ — ਐਕਸਟੈਂਸ਼ਨ ਪੰਨਾ, ਦ੍ਰਿਸ਼ ਦੀ ਇੱਕ ਵੱਖਰੀ ਟੈਬ ਵਿੱਚ “ਜੀਵਤ” chrome-extension://<id_расширения>/customPage.html.

ਇਹ ਸੰਦਰਭ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋਜ਼ ਅਤੇ ਟੈਬਾਂ ਤੋਂ ਸੁਤੰਤਰ ਤੌਰ 'ਤੇ ਮੌਜੂਦ ਹੈ। ਪਿਛੋਕੜ ਪੰਨਾ ਇੱਕ ਸਿੰਗਲ ਕਾਪੀ ਵਿੱਚ ਮੌਜੂਦ ਹੈ ਅਤੇ ਹਮੇਸ਼ਾ ਕੰਮ ਕਰਦਾ ਹੈ (ਅਪਵਾਦ ਇਵੈਂਟ ਪੰਨਾ ਹੈ, ਜਦੋਂ ਬੈਕਗ੍ਰਾਊਂਡ ਸਕ੍ਰਿਪਟ ਕਿਸੇ ਇਵੈਂਟ ਦੁਆਰਾ ਲਾਂਚ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਅਤੇ ਇਸਦੇ ਲਾਗੂ ਹੋਣ ਤੋਂ ਬਾਅਦ "ਮਰ ਜਾਂਦੀ ਹੈ)। ਪੌਪਅੱਪ ਪੰਨਾ ਮੌਜੂਦ ਹੈ ਜਦੋਂ ਪੌਪਅੱਪ ਵਿੰਡੋ ਖੁੱਲ੍ਹੀ ਹੈ, ਅਤੇ ਵਿਉਂਤਿਆ ਪੰਨਾ — ਜਦੋਂ ਕਿ ਇਸਦੇ ਨਾਲ ਟੈਬ ਖੁੱਲੀ ਹੈ। ਇਸ ਸੰਦਰਭ ਤੋਂ ਹੋਰ ਟੈਬਾਂ ਅਤੇ ਉਹਨਾਂ ਦੀ ਸਮੱਗਰੀ ਤੱਕ ਕੋਈ ਪਹੁੰਚ ਨਹੀਂ ਹੈ।

ਸਮੱਗਰੀ ਸਕ੍ਰਿਪਟ ਸੰਦਰਭ

ਸਮੱਗਰੀ ਸਕ੍ਰਿਪਟ ਫਾਈਲ ਨੂੰ ਹਰੇਕ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ ਦੇ ਨਾਲ ਲਾਂਚ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਸ ਕੋਲ ਐਕਸਟੈਂਸ਼ਨ ਦੇ API ਦੇ ਹਿੱਸੇ ਅਤੇ ਵੈਬ ਪੇਜ ਦੇ DOM ਟ੍ਰੀ ਤੱਕ ਪਹੁੰਚ ਹੈ। ਇਹ ਸਮੱਗਰੀ ਸਕ੍ਰਿਪਟਾਂ ਹਨ ਜੋ ਪੰਨੇ ਦੇ ਨਾਲ ਪਰਸਪਰ ਪ੍ਰਭਾਵ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਹਨ। ਐਕਸਟੈਂਸ਼ਨਾਂ ਜੋ DOM ਟ੍ਰੀ ਦੀ ਹੇਰਾਫੇਰੀ ਕਰਦੀਆਂ ਹਨ, ਇਹ ਸਮੱਗਰੀ ਸਕ੍ਰਿਪਟਾਂ ਵਿੱਚ ਕਰਦੀਆਂ ਹਨ - ਉਦਾਹਰਨ ਲਈ, ਵਿਗਿਆਪਨ ਬਲੌਕਰ ਜਾਂ ਅਨੁਵਾਦਕ। ਨਾਲ ਹੀ, ਸਮੱਗਰੀ ਸਕ੍ਰਿਪਟ ਸਟੈਂਡਰਡ ਦੁਆਰਾ ਪੰਨੇ ਨਾਲ ਸੰਚਾਰ ਕਰ ਸਕਦੀ ਹੈ postMessage.

ਵੈੱਬ ਪੰਨਾ ਸੰਦਰਭ

ਇਹ ਅਸਲ ਵੈਬ ਪੇਜ ਹੈ। ਇਸਦਾ ਐਕਸਟੈਂਸ਼ਨ ਨਾਲ ਕੋਈ ਲੈਣਾ-ਦੇਣਾ ਨਹੀਂ ਹੈ ਅਤੇ ਇਸਦੀ ਉੱਥੇ ਪਹੁੰਚ ਨਹੀਂ ਹੈ, ਸਿਵਾਏ ਉਹਨਾਂ ਮਾਮਲਿਆਂ ਨੂੰ ਛੱਡ ਕੇ ਜਿੱਥੇ ਇਸ ਪੰਨੇ ਦਾ ਡੋਮੇਨ ਮੈਨੀਫੈਸਟ ਵਿੱਚ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਨਹੀਂ ਦਰਸਾਇਆ ਗਿਆ ਹੈ (ਹੇਠਾਂ ਇਸ ਬਾਰੇ ਹੋਰ)।

ਸੁਨੇਹੇ ਦਾ ਆਦਾਨ ਪ੍ਰਦਾਨ

ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਨੂੰ ਇੱਕ ਦੂਜੇ ਨਾਲ ਸੰਦੇਸ਼ਾਂ ਦਾ ਆਦਾਨ-ਪ੍ਰਦਾਨ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਇਸਦੇ ਲਈ ਇੱਕ API ਹੈ runtime.sendMessage ਇੱਕ ਸੁਨੇਹਾ ਭੇਜਣ ਲਈ background и tabs.sendMessage ਕਿਸੇ ਪੰਨੇ 'ਤੇ ਸੁਨੇਹਾ ਭੇਜਣ ਲਈ (ਸਮਗਰੀ ਸਕ੍ਰਿਪਟ, ਪੌਪਅੱਪ ਜਾਂ ਵੈਬ ਪੇਜ ਜੇ ਉਪਲਬਧ ਹੋਵੇ externally_connectable). Chrome API ਨੂੰ ਐਕਸੈਸ ਕਰਨ ਵੇਲੇ ਹੇਠਾਂ ਇੱਕ ਉਦਾਹਰਨ ਹੈ।

// Сообщением может быть любой JSON сериализуемый объект
const msg = {a: 'foo', b: 'bar'};

// extensionId можно не указывать, если мы хотим послать сообщение 'своему' расширению (из ui или контент скрипта)
chrome.runtime.sendMessage(extensionId, msg);

// Так выглядит обработчик
chrome.runtime.onMessage.addListener((msg) => console.log(msg))

// Можно слать сообщения вкладкам зная их id
chrome.tabs.sendMessage(tabId, msg)

// Получить к вкладкам и их id можно, например, вот так
chrome.tabs.query(
    {currentWindow: true, active : true},
    function(tabArray){
      tabArray.forEach(tab => console.log(tab.id))
    }
)

ਪੂਰੇ ਸੰਚਾਰ ਲਈ, ਤੁਸੀਂ ਦੁਆਰਾ ਕੁਨੈਕਸ਼ਨ ਬਣਾ ਸਕਦੇ ਹੋ runtime.connect. ਜਵਾਬ ਵਿੱਚ ਅਸੀਂ ਪ੍ਰਾਪਤ ਕਰਾਂਗੇ runtime.Port, ਜਿਸ ਨੂੰ, ਜਦੋਂ ਇਹ ਖੁੱਲ੍ਹਾ ਹੁੰਦਾ ਹੈ, ਤੁਸੀਂ ਕਿੰਨੇ ਵੀ ਸੁਨੇਹੇ ਭੇਜ ਸਕਦੇ ਹੋ। ਗਾਹਕ ਪਾਸੇ, ਉਦਾਹਰਨ ਲਈ, contentscript, ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਦਿਸਦਾ ਹੈ:

// Опять же extensionId можно не указывать при коммуникации внутри одного расширения. Подключение можно именовать
const port = chrome.runtime.connect({name: "knockknock"});
port.postMessage({joke: "Knock knock"});
port.onMessage.addListener(function(msg) {
    if (msg.question === "Who's there?")
        port.postMessage({answer: "Madame"});
    else if (msg.question === "Madame who?")
        port.postMessage({answer: "Madame... Bovary"});

ਸਰਵਰ ਜਾਂ ਪਿਛੋਕੜ:

// Обработчик для подключения 'своих' вкладок. Контент скриптов, popup или страниц расширения
chrome.runtime.onConnect.addListener(function(port) {
    console.assert(port.name === "knockknock");
    port.onMessage.addListener(function(msg) {
        if (msg.joke === "Knock knock")
            port.postMessage({question: "Who's there?"});
        else if (msg.answer === "Madame")
            port.postMessage({question: "Madame who?"});
        else if (msg.answer === "Madame... Bovary")
            port.postMessage({question: "I don't get it."});
    });
});

// Обработчик для подключения внешних вкладок. Других расширений или веб страниц, которым разрешен доступ в манифесте
chrome.runtime.onConnectExternal.addListener(function(port) {
    ...
});

ਇੱਕ ਸਮਾਗਮ ਵੀ ਹੈ onDisconnect ਅਤੇ ਢੰਗ disconnect.

ਐਪਲੀਕੇਸ਼ਨ ਚਿੱਤਰ

ਆਓ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਈਏ ਜੋ ਨਿੱਜੀ ਕੁੰਜੀਆਂ ਨੂੰ ਸਟੋਰ ਕਰਦਾ ਹੈ, ਜਨਤਕ ਜਾਣਕਾਰੀ ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ (ਪਤਾ, ਜਨਤਕ ਕੁੰਜੀ ਪੰਨੇ ਨਾਲ ਸੰਚਾਰ ਕਰਦੀ ਹੈ ਅਤੇ ਤੀਜੀ-ਧਿਰ ਦੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਲੈਣ-ਦੇਣ ਲਈ ਦਸਤਖਤ ਦੀ ਬੇਨਤੀ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀ ਹੈ।

ਐਪਲੀਕੇਸ਼ਨ ਵਿਕਾਸ

ਸਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਉਪਭੋਗਤਾ ਨਾਲ ਗੱਲਬਾਤ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ ਅਤੇ ਕਾਲ ਵਿਧੀਆਂ (ਉਦਾਹਰਨ ਲਈ, ਲੈਣ-ਦੇਣ 'ਤੇ ਦਸਤਖਤ ਕਰਨ ਲਈ) ਲਈ ਇੱਕ API ਦੇ ਨਾਲ ਪੰਨੇ ਨੂੰ ਪ੍ਰਦਾਨ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਸਿਰਫ਼ ਇੱਕ ਨਾਲ ਕਰੋ contentscript ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ, ਕਿਉਂਕਿ ਇਸਦੀ ਸਿਰਫ਼ DOM ਤੱਕ ਪਹੁੰਚ ਹੈ, ਪਰ ਪੰਨੇ ਦੇ JS ਤੱਕ ਨਹੀਂ। ਰਾਹੀਂ ਜੁੜੋ runtime.connect ਅਸੀਂ ਨਹੀਂ ਕਰ ਸਕਦੇ, ਕਿਉਂਕਿ API ਨੂੰ ਸਾਰੇ ਡੋਮੇਨਾਂ 'ਤੇ ਲੋੜੀਂਦਾ ਹੈ, ਅਤੇ ਮੈਨੀਫੈਸਟ ਵਿੱਚ ਸਿਰਫ਼ ਖਾਸ ਨੂੰ ਹੀ ਨਿਰਦਿਸ਼ਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਨਤੀਜੇ ਵਜੋਂ, ਚਿੱਤਰ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗਾ:

ਇੱਕ ਹੋਰ ਸਕ੍ਰਿਪਟ ਹੋਵੇਗੀ - inpage, ਜਿਸ ਨੂੰ ਅਸੀਂ ਪੰਨੇ ਵਿੱਚ ਇੰਜੈਕਟ ਕਰਾਂਗੇ। ਇਹ ਇਸਦੇ ਸੰਦਰਭ ਵਿੱਚ ਚੱਲੇਗਾ ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਇੱਕ API ਪ੍ਰਦਾਨ ਕਰੇਗਾ।

Начало

ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਕੋਡ 'ਤੇ ਉਪਲਬਧ ਹੈ GitHub. ਵਰਣਨ ਦੇ ਦੌਰਾਨ ਕਮਿਟਾਂ ਦੇ ਲਿੰਕ ਹੋਣਗੇ.

ਆਉ ਮੈਨੀਫੈਸਟੋ ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ:

{
  // Имя и описание, версия. Все это будет видно в браузере в chrome://extensions/?id=<id расширения>
  "name": "Signer",
  "description": "Extension demo",
  "version": "0.0.1",
  "manifest_version": 2,

  // Скрипты, которые будут исполнятся в background, их может быть несколько
  "background": {
    "scripts": ["background.js"]
  },

  // Какой html использовать для popup
  "browser_action": {
    "default_title": "My Extension",
    "default_popup": "popup.html"
  },

  // Контент скрипты.
  // У нас один объект: для всех url начинающихся с http или https мы запускаем
  // contenscript context со скриптом contentscript.js. Запускать сразу по получении документа для всех фреймов
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "contentscript.js"
      ],
      "run_at": "document_start",
      "all_frames": true
    }
  ],
  // Разрешен доступ к localStorage и idle api
  "permissions": [
    "storage",
    // "unlimitedStorage",
    //"clipboardWrite",
    "idle"
    //"activeTab",
    //"webRequest",
    //"notifications",
    //"tabs"
  ],
  // Здесь указываются ресурсы, к которым будет иметь доступ веб страница. Тоесть их можно будет запрашивать fetche'м или просто xhr
  "web_accessible_resources": ["inpage.js"]
}

ਖਾਲੀ background.js, popup.js, inpage.js ਅਤੇ contentscript.js ਬਣਾਓ। ਅਸੀਂ popup.html ਜੋੜਦੇ ਹਾਂ - ਅਤੇ ਸਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਪਹਿਲਾਂ ਹੀ ਗੂਗਲ ਕਰੋਮ ਵਿੱਚ ਲੋਡ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ ਅਤੇ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਇਹ ਕੰਮ ਕਰਦਾ ਹੈ।

ਇਸਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਕੋਡ ਲੈ ਸਕਦੇ ਹੋ ਇੱਥੋਂ. ਅਸੀਂ ਜੋ ਕੀਤਾ ਉਸ ਤੋਂ ਇਲਾਵਾ, ਲਿੰਕ ਨੇ ਵੈਬਪੈਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪ੍ਰੋਜੈਕਟ ਦੀ ਅਸੈਂਬਲੀ ਨੂੰ ਕੌਂਫਿਗਰ ਕੀਤਾ। ਬ੍ਰਾਉਜ਼ਰ ਵਿੱਚ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਜੋੜਨ ਲਈ, chrome://extensions ਵਿੱਚ ਤੁਹਾਨੂੰ ਲੋਡ ਅਨਪੈਕਡ ਅਤੇ ਸੰਬੰਧਿਤ ਐਕਸਟੈਂਸ਼ਨ ਵਾਲਾ ਫੋਲਡਰ ਚੁਣਨ ਦੀ ਲੋੜ ਹੈ - ਸਾਡੇ ਕੇਸ ਵਿੱਚ ਜਿਲਾ.

ਹੁਣ ਸਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਸਥਾਪਿਤ ਅਤੇ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ। ਤੁਸੀਂ ਹੇਠਾਂ ਦਿੱਤੇ ਅਨੁਸਾਰ ਵੱਖ-ਵੱਖ ਸੰਦਰਭਾਂ ਲਈ ਡਿਵੈਲਪਰ ਟੂਲ ਚਲਾ ਸਕਦੇ ਹੋ:

ਪੌਪਅੱਪ ->

ਸਮੱਗਰੀ ਸਕ੍ਰਿਪਟ ਕੰਸੋਲ ਤੱਕ ਪਹੁੰਚ ਉਸ ਪੰਨੇ ਦੇ ਕੰਸੋਲ ਦੁਆਰਾ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਜਿਸ 'ਤੇ ਇਹ ਲਾਂਚ ਕੀਤਾ ਗਿਆ ਹੈ।

ਸੁਨੇਹੇ ਦਾ ਆਦਾਨ ਪ੍ਰਦਾਨ

ਇਸ ਲਈ, ਸਾਨੂੰ ਦੋ ਸੰਚਾਰ ਚੈਨਲ ਸਥਾਪਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ: inpage <-> ਬੈਕਗਰਾਊਂਡ ਅਤੇ ਪੌਪਅੱਪ <-> ਬੈਕਗਰਾਊਂਡ। ਤੁਸੀਂ, ਬੇਸ਼ੱਕ, ਸਿਰਫ਼ ਪੋਰਟ ਨੂੰ ਸੁਨੇਹੇ ਭੇਜ ਸਕਦੇ ਹੋ ਅਤੇ ਆਪਣੇ ਖੁਦ ਦੇ ਪ੍ਰੋਟੋਕੋਲ ਦੀ ਖੋਜ ਕਰ ਸਕਦੇ ਹੋ, ਪਰ ਮੈਂ ਉਸ ਪਹੁੰਚ ਨੂੰ ਤਰਜੀਹ ਦਿੰਦਾ ਹਾਂ ਜੋ ਮੈਂ ਮੈਟਾਮਾਸਕ ਓਪਨ ਸੋਰਸ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਦੇਖਿਆ ਸੀ।

ਇਹ Ethereum ਨੈੱਟਵਰਕ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਹੈ। ਇਸ ਵਿੱਚ, ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਵੱਖ-ਵੱਖ ਹਿੱਸੇ dnode ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ RPC ਰਾਹੀਂ ਸੰਚਾਰ ਕਰਦੇ ਹਨ। ਇਹ ਤੁਹਾਨੂੰ ਇੱਕ ਐਕਸਚੇਂਜ ਨੂੰ ਬਹੁਤ ਤੇਜ਼ੀ ਨਾਲ ਅਤੇ ਸੁਵਿਧਾਜਨਕ ਢੰਗ ਨਾਲ ਸੰਗਠਿਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ ਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ ਇੱਕ ਟ੍ਰਾਂਸਪੋਰਟ ਦੇ ਤੌਰ ਤੇ ਇੱਕ ਨੋਡਜ ਸਟ੍ਰੀਮ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋ (ਮਤਲਬ ਇੱਕ ਵਸਤੂ ਜੋ ਇੱਕੋ ਇੰਟਰਫੇਸ ਨੂੰ ਲਾਗੂ ਕਰਦੀ ਹੈ):

import Dnode from "dnode/browser";

// В этом примере условимся что клиент удаленно вызывает функции на сервере, хотя ничего нам не мешает сделать это двунаправленным

// Cервер
// API, которое мы хотим предоставить
const dnode = Dnode({
    hello: (cb) => cb(null, "world")
})
// Транспорт, поверх которого будет работать dnode. Любой nodejs стрим. В браузере есть бибилиотека 'readable-stream'
connectionStream.pipe(dnode).pipe(connectionStream)

// Клиент
const dnodeClient = Dnode() // Вызов без агрумента значит что мы не предоставляем API на другой стороне

// Выведет в консоль world
dnodeClient.once('remote', remote => {
    remote.hello(((err, value) => console.log(value)))
})

ਹੁਣ ਅਸੀਂ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਕਲਾਸ ਬਣਾਵਾਂਗੇ। ਇਹ ਪੌਪਅੱਪ ਅਤੇ ਵੈਬ ਪੇਜ ਲਈ API ਆਬਜੈਕਟ ਬਣਾਏਗਾ, ਅਤੇ ਉਹਨਾਂ ਲਈ ਇੱਕ ਡੀਨੋਡ ਬਣਾਏਗਾ:

import Dnode from 'dnode/browser';

export class SignerApp {

    // Возвращает объект API для ui
    popupApi(){
        return {
            hello: cb => cb(null, 'world')
        }
    }

    // Возвращает объет API для страницы
    pageApi(){
        return {
            hello: cb => cb(null, 'world')
        }
    }

    // Подключает popup ui
    connectPopup(connectionStream){
        const api = this.popupApi();
        const dnode = Dnode(api);

        connectionStream.pipe(dnode).pipe(connectionStream);

        dnode.on('remote', (remote) => {
            console.log(remote)
        })
    }

    // Подключает страницу
    connectPage(connectionStream, origin){
        const api = this.popupApi();
        const dnode = Dnode(api);

        connectionStream.pipe(dnode).pipe(connectionStream);

        dnode.on('remote', (remote) => {
            console.log(origin);
            console.log(remote)
        })
    }
}

ਇੱਥੇ ਅਤੇ ਹੇਠਾਂ, ਗਲੋਬਲ ਕਰੋਮ ਆਬਜੈਕਟ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਐਕਸਟੈਂਸ਼ਨ ਏਪੀਆਈ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਜੋ ਕਿ Google ਦੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ Chrome ਅਤੇ ਹੋਰਾਂ ਵਿੱਚ ਬ੍ਰਾਊਜ਼ਰ ਤੱਕ ਪਹੁੰਚ ਕਰਦਾ ਹੈ। ਇਹ ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ ਲਈ ਕੀਤਾ ਗਿਆ ਹੈ, ਪਰ ਇਸ ਲੇਖ ਦੇ ਉਦੇਸ਼ਾਂ ਲਈ ਕੋਈ ਸਿਰਫ਼ 'chrome.runtime.connect' ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦਾ ਹੈ।

ਆਓ ਬੈਕਗ੍ਰਾਉਂਡ ਸਕ੍ਰਿਪਟ ਵਿੱਚ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਉਦਾਹਰਨ ਬਣਾਈਏ:

import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import {SignerApp} from "./SignerApp";

const app = new SignerApp();

// onConnect срабатывает при подключении 'процессов' (contentscript, popup, или страница расширения)
extensionApi.runtime.onConnect.addListener(connectRemote);

function connectRemote(remotePort) {
    const processName = remotePort.name;
    const portStream = new PortStream(remotePort);
    // При установке соединения можно указывать имя, по этому имени мы и оппределяем кто к нам подлючился, контентскрипт или ui
    if (processName === 'contentscript'){
        const origin = remotePort.sender.url
        app.connectPage(portStream, origin)
    }else{
        app.connectPopup(portStream)
    }
}

ਕਿਉਂਕਿ dnode ਸਟ੍ਰੀਮਾਂ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ, ਅਤੇ ਸਾਨੂੰ ਇੱਕ ਪੋਰਟ ਪ੍ਰਾਪਤ ਹੁੰਦਾ ਹੈ, ਇੱਕ ਅਡਾਪਟਰ ਕਲਾਸ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਹ ਪੜ੍ਹਨਯੋਗ-ਸਟ੍ਰੀਮ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਇਆ ਗਿਆ ਹੈ, ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਨੋਡਜ ਸਟ੍ਰੀਮ ਨੂੰ ਲਾਗੂ ਕਰਦਾ ਹੈ:

import {Duplex} from 'readable-stream';

export class PortStream extends Duplex{
    constructor(port){
        super({objectMode: true});
        this._port = port;
        port.onMessage.addListener(this._onMessage.bind(this));
        port.onDisconnect.addListener(this._onDisconnect.bind(this))
    }

    _onMessage(msg) {
        if (Buffer.isBuffer(msg)) {
            delete msg._isBuffer;
            const data = new Buffer(msg);
            this.push(data)
        } else {
            this.push(msg)
        }
    }

    _onDisconnect() {
        this.destroy()
    }

    _read(){}

    _write(msg, encoding, cb) {
        try {
            if (Buffer.isBuffer(msg)) {
                const data = msg.toJSON();
                data._isBuffer = true;
                this._port.postMessage(data)
            } else {
                this._port.postMessage(msg)
            }
        } catch (err) {
            return cb(new Error('PortStream - disconnected'))
        }
        cb()
    }
}

ਹੁਣ UI ਵਿੱਚ ਇੱਕ ਕੁਨੈਕਸ਼ਨ ਬਣਾਉ:

import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import Dnode from 'dnode/browser';

const DEV_MODE = process.env.NODE_ENV !== 'production';

setupUi().catch(console.error);

async function setupUi(){
    // Также, как и в классе приложения создаем порт, оборачиваем в stream, делаем  dnode
    const backgroundPort = extensionApi.runtime.connect({name: 'popup'});
    const connectionStream = new PortStream(backgroundPort);

    const dnode = Dnode();

    connectionStream.pipe(dnode).pipe(connectionStream);

    const background = await new Promise(resolve => {
        dnode.once('remote', api => {
            resolve(api)
        })
    });

    // Делаем объект API доступным из консоли
    if (DEV_MODE){
        global.background = background;
    }
}

ਫਿਰ ਅਸੀਂ ਸਮੱਗਰੀ ਸਕ੍ਰਿਪਟ ਵਿੱਚ ਕਨੈਕਸ਼ਨ ਬਣਾਉਂਦੇ ਹਾਂ:

import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import PostMessageStream from 'post-message-stream';

setupConnection();
injectScript();

function setupConnection(){
    const backgroundPort = extensionApi.runtime.connect({name: 'contentscript'});
    const backgroundStream = new PortStream(backgroundPort);

    const pageStream = new PostMessageStream({
        name: 'content',
        target: 'page',
    });

    pageStream.pipe(backgroundStream).pipe(pageStream);
}

function injectScript(){
    try {
        // inject in-page script
        let script = document.createElement('script');
        script.src = extensionApi.extension.getURL('inpage.js');
        const container = document.head || document.documentElement;
        container.insertBefore(script, container.children[0]);
        script.onload = () => script.remove();
    } catch (e) {
        console.error('Injection failed.', e);
    }
}

ਕਿਉਂਕਿ ਸਾਨੂੰ ਸਮੱਗਰੀ ਸਕ੍ਰਿਪਟ ਵਿੱਚ API ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ, ਪਰ ਸਿੱਧੇ ਪੰਨੇ 'ਤੇ, ਅਸੀਂ ਦੋ ਚੀਜ਼ਾਂ ਕਰਦੇ ਹਾਂ:

1. ਅਸੀਂ ਦੋ ਧਾਰਾਵਾਂ ਬਣਾਉਂਦੇ ਹਾਂ। ਇੱਕ - ਪੇਜ ਵੱਲ, ਪੋਸਟਮੈਸੇਜ ਦੇ ਸਿਖਰ 'ਤੇ। ਇਸਦੇ ਲਈ ਅਸੀਂ ਇਸਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਇਹ ਪੈਕੇਜ ਮੈਟਾਮਾਸਕ ਦੇ ਸਿਰਜਣਹਾਰਾਂ ਤੋਂ। ਦੂਜੀ ਸਟ੍ਰੀਮ ਤੋਂ ਪ੍ਰਾਪਤ ਕੀਤੀ ਪੋਰਟ ਉੱਤੇ ਬੈਕਗ੍ਰਾਉਂਡ ਹੈ runtime.connect. ਆਓ ਉਨ੍ਹਾਂ ਨੂੰ ਖਰੀਦੀਏ। ਹੁਣ ਪੇਜ ਦੀ ਬੈਕਗ੍ਰਾਉਂਡ ਵਿੱਚ ਇੱਕ ਸਟ੍ਰੀਮ ਹੋਵੇਗੀ।
2. ਸਕ੍ਰਿਪਟ ਨੂੰ DOM ਵਿੱਚ ਇੰਜੈਕਟ ਕਰੋ। ਸਕ੍ਰਿਪਟ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰੋ (ਮੈਨੀਫੈਸਟ ਵਿੱਚ ਇਸ ਤੱਕ ਪਹੁੰਚ ਦੀ ਇਜਾਜ਼ਤ ਸੀ) ਅਤੇ ਇੱਕ ਟੈਗ ਬਣਾਓ script ਇਸ ਦੇ ਅੰਦਰ ਸਮੱਗਰੀ ਦੇ ਨਾਲ:

import PostMessageStream from 'post-message-stream';
import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";

setupConnection();
injectScript();

function setupConnection(){
    // Стрим к бекграунду
    const backgroundPort = extensionApi.runtime.connect({name: 'contentscript'});
    const backgroundStream = new PortStream(backgroundPort);

    // Стрим к странице
    const pageStream = new PostMessageStream({
        name: 'content',
        target: 'page',
    });

    pageStream.pipe(backgroundStream).pipe(pageStream);
}

function injectScript(){
    try {
        // inject in-page script
        let script = document.createElement('script');
        script.src = extensionApi.extension.getURL('inpage.js');
        const container = document.head || document.documentElement;
        container.insertBefore(script, container.children[0]);
        script.onload = () => script.remove();
    } catch (e) {
        console.error('Injection failed.', e);
    }
}

ਹੁਣ ਅਸੀਂ ਇਨਪੇਜ ਵਿੱਚ ਇੱਕ ਏਪੀਆਈ ਆਬਜੈਕਟ ਬਣਾਉਂਦੇ ਹਾਂ ਅਤੇ ਇਸਨੂੰ ਗਲੋਬਲ ਤੇ ਸੈਟ ਕਰਦੇ ਹਾਂ:

import PostMessageStream from 'post-message-stream';
import Dnode from 'dnode/browser';

setupInpageApi().catch(console.error);

async function setupInpageApi() {
    // Стрим к контентскрипту
    const connectionStream = new PostMessageStream({
        name: 'page',
        target: 'content',
    });

    const dnode = Dnode();

    connectionStream.pipe(dnode).pipe(connectionStream);

    // Получаем объект API
    const pageApi = await new Promise(resolve => {
        dnode.once('remote', api => {
            resolve(api)
        })
    });

    // Доступ через window
    global.SignerApp = pageApi;
}

ਅਸੀਂ ਤਿਆਰ ਹਾਂ ਪੰਨੇ ਅਤੇ UI ਲਈ ਵੱਖਰੇ API ਦੇ ਨਾਲ ਰਿਮੋਟ ਪ੍ਰੋਸੀਜਰ ਕਾਲ (RPC). ਇੱਕ ਨਵੇਂ ਪੰਨੇ ਨੂੰ ਬੈਕਗ੍ਰਾਉਂਡ ਨਾਲ ਜੋੜਦੇ ਸਮੇਂ ਅਸੀਂ ਇਹ ਦੇਖ ਸਕਦੇ ਹਾਂ:

ਖਾਲੀ API ਅਤੇ ਮੂਲ। ਪੇਜ ਸਾਈਡ 'ਤੇ, ਅਸੀਂ ਹੈਲੋ ਫੰਕਸ਼ਨ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਕਾਲ ਕਰ ਸਕਦੇ ਹਾਂ:

ਆਧੁਨਿਕ JS ਵਿੱਚ ਕਾਲਬੈਕ ਫੰਕਸ਼ਨਾਂ ਨਾਲ ਕੰਮ ਕਰਨਾ ਮਾੜਾ ਵਿਵਹਾਰ ਹੈ, ਇਸਲਈ ਆਓ ਇੱਕ ਡੀਨੋਡ ਬਣਾਉਣ ਲਈ ਇੱਕ ਛੋਟਾ ਸਹਾਇਕ ਲਿਖੀਏ ਜੋ ਤੁਹਾਨੂੰ ਉਪਯੋਗਤਾਵਾਂ ਵਿੱਚ ਇੱਕ API ਵਸਤੂ ਨੂੰ ਪਾਸ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।

API ਵਸਤੂਆਂ ਹੁਣ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਣਗੀਆਂ:

export class SignerApp {

    popupApi() {
        return {
            hello: async () => "world"
        }
    }

...

}

ਇਸ ਤਰ੍ਹਾਂ ਰਿਮੋਟ ਤੋਂ ਇੱਕ ਵਸਤੂ ਪ੍ਰਾਪਤ ਕਰਨਾ:

import {cbToPromise, transformMethods} from "../../src/utils/setupDnode";

const pageApi = await new Promise(resolve => {
    dnode.once('remote', remoteApi => {
        // С помощью утилит меняем все callback на promise
        resolve(transformMethods(cbToPromise, remoteApi))
    })
});

ਅਤੇ ਕਾਲਿੰਗ ਫੰਕਸ਼ਨ ਇੱਕ ਵਾਅਦਾ ਵਾਪਸ ਕਰਦਾ ਹੈ:

ਅਸਿੰਕ੍ਰੋਨਸ ਫੰਕਸ਼ਨਾਂ ਵਾਲਾ ਸੰਸਕਰਣ ਉਪਲਬਧ ਹੈ ਇੱਥੇ.

ਕੁੱਲ ਮਿਲਾ ਕੇ, RPC ਅਤੇ ਸਟ੍ਰੀਮ ਪਹੁੰਚ ਕਾਫ਼ੀ ਲਚਕਦਾਰ ਜਾਪਦੀ ਹੈ: ਅਸੀਂ ਸਟੀਮ ਮਲਟੀਪਲੈਕਸਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ ਅਤੇ ਵੱਖ-ਵੱਖ ਕਾਰਜਾਂ ਲਈ ਕਈ ਵੱਖ-ਵੱਖ API ਬਣਾ ਸਕਦੇ ਹਾਂ। ਸਿਧਾਂਤ ਵਿੱਚ, ਡਨੋਡ ਨੂੰ ਕਿਤੇ ਵੀ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਮੁੱਖ ਗੱਲ ਇਹ ਹੈ ਕਿ ਨੋਡਜ਼ ਸਟ੍ਰੀਮ ਦੇ ਰੂਪ ਵਿੱਚ ਟ੍ਰਾਂਸਪੋਰਟ ਨੂੰ ਸਮੇਟਣਾ.

ਇੱਕ ਵਿਕਲਪ JSON ਫਾਰਮੈਟ ਹੈ, ਜੋ JSON RPC 2 ਪ੍ਰੋਟੋਕੋਲ ਨੂੰ ਲਾਗੂ ਕਰਦਾ ਹੈ। ਹਾਲਾਂਕਿ, ਇਹ ਖਾਸ ਟ੍ਰਾਂਸਪੋਰਟਾਂ (TCP ਅਤੇ HTTP(S)) ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ, ਜੋ ਸਾਡੇ ਕੇਸ ਵਿੱਚ ਲਾਗੂ ਨਹੀਂ ਹੁੰਦਾ ਹੈ।

ਅੰਦਰੂਨੀ ਰਾਜ ਅਤੇ ਸਥਾਨਕ ਸਟੋਰੇਜ

ਸਾਨੂੰ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਅੰਦਰੂਨੀ ਸਥਿਤੀ ਨੂੰ ਸਟੋਰ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ - ਘੱਟੋ-ਘੱਟ ਸਾਈਨਿੰਗ ਕੁੰਜੀਆਂ। ਅਸੀਂ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਇੱਕ ਸਥਿਤੀ ਅਤੇ ਇਸਨੂੰ ਪੌਪਅੱਪ API ਵਿੱਚ ਬਦਲਣ ਦੇ ਤਰੀਕਿਆਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਜੋੜ ਸਕਦੇ ਹਾਂ:

import {setupDnode} from "./utils/setupDnode";

export class SignerApp {

    constructor(){
        this.store = {
            keys: [],
        };
    }

    addKey(key){
        this.store.keys.push(key)
    }

    removeKey(index){
        this.store.keys.splice(index,1)
    }

    popupApi(){
        return {
            addKey: async (key) => this.addKey(key),
            removeKey: async (index) => this.removeKey(index)
        }
    }

    ...

} 

ਬੈਕਗ੍ਰਾਉਂਡ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਵਿੱਚ ਸਭ ਕੁਝ ਲਪੇਟਾਂਗੇ ਅਤੇ ਐਪਲੀਕੇਸ਼ਨ ਆਬਜੈਕਟ ਨੂੰ ਵਿੰਡੋ ਵਿੱਚ ਲਿਖਾਂਗੇ ਤਾਂ ਜੋ ਅਸੀਂ ਕੰਸੋਲ ਤੋਂ ਇਸ ਨਾਲ ਕੰਮ ਕਰ ਸਕੀਏ:

import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import {SignerApp} from "./SignerApp";

const DEV_MODE = process.env.NODE_ENV !== 'production';

setupApp();

function setupApp() {
    const app = new SignerApp();

    if (DEV_MODE) {
        global.app = app;
    }

    extensionApi.runtime.onConnect.addListener(connectRemote);

    function connectRemote(remotePort) {
        const processName = remotePort.name;
        const portStream = new PortStream(remotePort);
        if (processName === 'contentscript') {
            const origin = remotePort.sender.url;
            app.connectPage(portStream, origin)
        } else {
            app.connectPopup(portStream)
        }
    }
}

ਆਓ UI ਕੰਸੋਲ ਤੋਂ ਕੁਝ ਕੁੰਜੀਆਂ ਜੋੜੀਏ ਅਤੇ ਵੇਖੀਏ ਕਿ ਰਾਜ ਨਾਲ ਕੀ ਹੁੰਦਾ ਹੈ:

ਰਾਜ ਨੂੰ ਸਥਾਈ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੈ ਤਾਂ ਜੋ ਮੁੜ ਚਾਲੂ ਕਰਨ ਵੇਲੇ ਕੁੰਜੀਆਂ ਗੁੰਮ ਨਾ ਹੋਣ.

ਅਸੀਂ ਇਸਨੂੰ ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ ਸਟੋਰ ਕਰਾਂਗੇ, ਹਰ ਬਦਲਾਅ ਦੇ ਨਾਲ ਇਸਨੂੰ ਓਵਰਰਾਈਟ ਕਰਾਂਗੇ। ਇਸ ਤੋਂ ਬਾਅਦ, UI ਲਈ ਵੀ ਇਸ ਤੱਕ ਪਹੁੰਚ ਜ਼ਰੂਰੀ ਹੋਵੇਗੀ, ਅਤੇ ਮੈਂ ਤਬਦੀਲੀਆਂ ਦੀ ਗਾਹਕੀ ਵੀ ਲੈਣਾ ਚਾਹਾਂਗਾ। ਇਸਦੇ ਅਧਾਰ 'ਤੇ, ਇੱਕ ਨਿਰੀਖਣਯੋਗ ਸਟੋਰੇਜ ਬਣਾਉਣਾ ਅਤੇ ਇਸ ਦੇ ਬਦਲਾਵਾਂ ਦੀ ਗਾਹਕੀ ਲੈਣਾ ਸੁਵਿਧਾਜਨਕ ਹੋਵੇਗਾ।

ਅਸੀਂ mobx ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ (https://github.com/mobxjs/mobx). ਚੋਣ ਇਸ 'ਤੇ ਡਿੱਗ ਗਈ ਕਿਉਂਕਿ ਮੈਨੂੰ ਇਸ ਨਾਲ ਕੰਮ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਸੀ, ਪਰ ਮੈਂ ਸੱਚਮੁੱਚ ਇਸਦਾ ਅਧਿਐਨ ਕਰਨਾ ਚਾਹੁੰਦਾ ਸੀ।

ਆਉ ਸ਼ੁਰੂਆਤੀ ਸਥਿਤੀ ਨੂੰ ਜੋੜੀਏ ਅਤੇ ਸਟੋਰ ਨੂੰ ਨਿਰੀਖਣਯੋਗ ਬਣਾਓ:

import {observable, action} from 'mobx';
import {setupDnode} from "./utils/setupDnode";

export class SignerApp {

    constructor(initState = {}) {
        // Внешне store так и останется тем же объектом, только теперь все его поля стали proxy, которые отслеживают доступ к ним
        this.store =  observable.object({
            keys: initState.keys || [],
        });
    }

    // Методы, которые меняют observable принято оборачивать декоратором
    @action
    addKey(key) {
        this.store.keys.push(key)
    }

    @action
    removeKey(index) {
        this.store.keys.splice(index, 1)
    }

    ...

}

"ਹੁੱਡ ਦੇ ਹੇਠਾਂ," mobx ਨੇ ਸਾਰੇ ਸਟੋਰ ਖੇਤਰਾਂ ਨੂੰ ਪ੍ਰੌਕਸੀ ਨਾਲ ਬਦਲ ਦਿੱਤਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਸਾਰੀਆਂ ਕਾਲਾਂ ਨੂੰ ਰੋਕਦਾ ਹੈ। ਇਹਨਾਂ ਸੁਨੇਹਿਆਂ ਨੂੰ ਸਬਸਕ੍ਰਾਈਬ ਕਰਨਾ ਸੰਭਵ ਹੋਵੇਗਾ।

ਹੇਠਾਂ ਮੈਂ ਅਕਸਰ "ਬਦਲਣ ਵੇਲੇ" ਸ਼ਬਦ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗਾ, ਹਾਲਾਂਕਿ ਇਹ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਹੀ ਨਹੀਂ ਹੈ। Mobx ਖੇਤਰਾਂ ਤੱਕ ਪਹੁੰਚ ਨੂੰ ਟਰੈਕ ਕਰਦਾ ਹੈ। ਪ੍ਰੌਕਸੀ ਵਸਤੂਆਂ ਦੇ ਪ੍ਰਾਪਤ ਕਰਨ ਵਾਲੇ ਅਤੇ ਸੇਟਰਸ ਜੋ ਲਾਇਬ੍ਰੇਰੀ ਬਣਾਉਂਦਾ ਹੈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ।

ਐਕਸ਼ਨ ਸਜਾਵਟ ਦੋ ਉਦੇਸ਼ਾਂ ਦੀ ਪੂਰਤੀ ਕਰਦੇ ਹਨ:

1. ਇਨਫੋਰਸ ਐਕਸ਼ਨ ਫਲੈਗ ਦੇ ਨਾਲ ਸਖਤ ਮੋਡ ਵਿੱਚ, mobx ਰਾਜ ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਬਦਲਣ ਦੀ ਮਨਾਹੀ ਕਰਦਾ ਹੈ। ਸਖ਼ਤ ਹਾਲਤਾਂ ਵਿਚ ਕੰਮ ਕਰਨਾ ਚੰਗਾ ਅਭਿਆਸ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।
2. ਭਾਵੇਂ ਕੋਈ ਫੰਕਸ਼ਨ ਕਈ ਵਾਰ ਸਥਿਤੀ ਨੂੰ ਬਦਲਦਾ ਹੈ - ਉਦਾਹਰਨ ਲਈ, ਅਸੀਂ ਕੋਡ ਦੀਆਂ ਕਈ ਲਾਈਨਾਂ ਵਿੱਚ ਕਈ ਖੇਤਰਾਂ ਨੂੰ ਬਦਲਦੇ ਹਾਂ - ਨਿਰੀਖਕਾਂ ਨੂੰ ਉਦੋਂ ਹੀ ਸੂਚਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਇਹ ਪੂਰਾ ਹੁੰਦਾ ਹੈ। ਇਹ ਫਰੰਟਐਂਡ ਲਈ ਖਾਸ ਤੌਰ 'ਤੇ ਮਹੱਤਵਪੂਰਨ ਹੈ, ਜਿੱਥੇ ਬੇਲੋੜੀ ਸਟੇਟ ਅੱਪਡੇਟ ਤੱਤਾਂ ਦੀ ਬੇਲੋੜੀ ਪੇਸ਼ਕਾਰੀ ਵੱਲ ਲੈ ਜਾਂਦੇ ਹਨ। ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਨਾ ਤਾਂ ਪਹਿਲਾ ਅਤੇ ਨਾ ਹੀ ਦੂਜਾ ਖਾਸ ਤੌਰ 'ਤੇ ਢੁਕਵਾਂ ਹੈ, ਪਰ ਅਸੀਂ ਸਭ ਤੋਂ ਵਧੀਆ ਅਭਿਆਸਾਂ ਦੀ ਪਾਲਣਾ ਕਰਾਂਗੇ। ਸਜਾਵਟ ਕਰਨ ਵਾਲਿਆਂ ਨੂੰ ਸਾਰੇ ਫੰਕਸ਼ਨਾਂ ਨਾਲ ਜੋੜਨ ਦਾ ਰਿਵਾਜ ਹੈ ਜੋ ਨਿਰੀਖਣ ਕੀਤੇ ਖੇਤਰਾਂ ਦੀ ਸਥਿਤੀ ਨੂੰ ਬਦਲਦੇ ਹਨ.

ਬੈਕਗ੍ਰਾਉਂਡ ਵਿੱਚ ਅਸੀਂ ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ ਸਟੇਟ ਨੂੰ ਸ਼ੁਰੂਆਤੀ ਅਤੇ ਸੇਵਿੰਗ ਜੋੜਾਂਗੇ:

import {reaction, toJS} from 'mobx';
import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import {SignerApp} from "./SignerApp";
// Вспомогательные методы. Записывают/читают объект в/из localStorage виде JSON строки по ключу 'store'
import {loadState, saveState} from "./utils/localStorage";

const DEV_MODE = process.env.NODE_ENV !== 'production';

setupApp();

function setupApp() {
    const initState = loadState();
    const app = new SignerApp(initState);

    if (DEV_MODE) {
        global.app = app;
    }

    // Setup state persistence

    // Результат reaction присваивается переменной, чтобы подписку можно было отменить. Нам это не нужно, оставлено для примера
    const localStorageReaction = reaction(
        () => toJS(app.store), // Функция-селектор данных
        saveState // Функция, которая будет вызвана при изменении данных, которые возвращает селектор
    );

    extensionApi.runtime.onConnect.addListener(connectRemote);

    function connectRemote(remotePort) {
        const processName = remotePort.name;
        const portStream = new PortStream(remotePort);
        if (processName === 'contentscript') {
            const origin = remotePort.sender.url
            app.connectPage(portStream, origin)
        } else {
            app.connectPopup(portStream)
        }
    }
}

ਪ੍ਰਤੀਕਰਮ ਫੰਕਸ਼ਨ ਇੱਥੇ ਦਿਲਚਸਪ ਹੈ. ਇਸ ਦੀਆਂ ਦੋ ਦਲੀਲਾਂ ਹਨ:

1. ਡਾਟਾ ਚੋਣਕਾਰ।
2. ਇੱਕ ਹੈਂਡਲਰ ਜਿਸਨੂੰ ਹਰ ਵਾਰ ਇਸ ਦੇ ਬਦਲਣ 'ਤੇ ਇਸ ਡੇਟਾ ਨਾਲ ਬੁਲਾਇਆ ਜਾਵੇਗਾ।

redux ਦੇ ਉਲਟ, ਜਿੱਥੇ ਅਸੀਂ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਇੱਕ ਦਲੀਲ ਦੇ ਤੌਰ 'ਤੇ ਸਥਿਤੀ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਾਂ, mobx ਯਾਦ ਰੱਖਦਾ ਹੈ ਕਿ ਅਸੀਂ ਚੋਣਕਾਰ ਦੇ ਅੰਦਰ ਕਿਹੜੀਆਂ ਨਿਰੀਖਣਯੋਗਤਾਵਾਂ ਨੂੰ ਐਕਸੈਸ ਕਰਦੇ ਹਾਂ, ਅਤੇ ਸਿਰਫ ਹੈਂਡਲਰ ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ ਜਦੋਂ ਉਹ ਬਦਲਦਾ ਹੈ।

ਇਹ ਸਮਝਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿ mobx ਕਿਸ ਤਰ੍ਹਾਂ ਇਹ ਫੈਸਲਾ ਕਰਦਾ ਹੈ ਕਿ ਅਸੀਂ ਕਿਹੜੇ ਨਿਰੀਖਣਯੋਗਾਂ ਦੀ ਗਾਹਕੀ ਲੈਂਦੇ ਹਾਂ। ਜੇ ਮੈਂ ਇਸ ਤਰ੍ਹਾਂ ਕੋਡ ਵਿੱਚ ਇੱਕ ਚੋਣਕਾਰ ਲਿਖਿਆ ਹੈ() => app.store, ਫਿਰ ਪ੍ਰਤੀਕ੍ਰਿਆ ਨੂੰ ਕਦੇ ਵੀ ਨਹੀਂ ਕਿਹਾ ਜਾਵੇਗਾ, ਕਿਉਂਕਿ ਸਟੋਰੇਜ਼ ਖੁਦ ਨਿਰੀਖਣਯੋਗ ਨਹੀਂ ਹੈ, ਸਿਰਫ ਇਸਦੇ ਖੇਤਰ ਹਨ।

ਜੇ ਮੈਂ ਇਸ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਲਿਖਿਆ () => app.store.keys, ਫਿਰ ਦੁਬਾਰਾ ਕੁਝ ਨਹੀਂ ਹੋਵੇਗਾ, ਕਿਉਂਕਿ ਐਰੇ ਐਲੀਮੈਂਟਸ ਨੂੰ ਜੋੜਨ/ਹਟਾਉਣ ਵੇਲੇ, ਇਸਦਾ ਹਵਾਲਾ ਨਹੀਂ ਬਦਲੇਗਾ।

Mobx ਪਹਿਲੀ ਵਾਰ ਚੋਣਕਾਰ ਦੇ ਤੌਰ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ ਅਤੇ ਸਿਰਫ਼ ਉਹਨਾਂ ਨਿਰੀਖਣਯੋਗਾਂ ਦਾ ਟ੍ਰੈਕ ਰੱਖਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਤੱਕ ਅਸੀਂ ਪਹੁੰਚ ਕੀਤੀ ਹੈ। ਇਹ ਪ੍ਰੌਕਸੀ ਗੈਟਰਾਂ ਦੁਆਰਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਸ ਲਈ, ਬਿਲਟ-ਇਨ ਫੰਕਸ਼ਨ ਇੱਥੇ ਵਰਤਿਆ ਗਿਆ ਹੈ toJS. ਇਹ ਅਸਲੀ ਖੇਤਰਾਂ ਨਾਲ ਬਦਲੀਆਂ ਸਾਰੀਆਂ ਪ੍ਰੌਕਸੀਜ਼ ਦੇ ਨਾਲ ਇੱਕ ਨਵੀਂ ਵਸਤੂ ਵਾਪਸ ਕਰਦਾ ਹੈ। ਐਗਜ਼ੀਕਿਊਸ਼ਨ ਦੇ ਦੌਰਾਨ, ਇਹ ਆਬਜੈਕਟ ਦੇ ਸਾਰੇ ਖੇਤਰਾਂ ਨੂੰ ਪੜ੍ਹਦਾ ਹੈ - ਇਸ ਲਈ ਗੈਟਰਸ ਨੂੰ ਚਾਲੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

ਪੌਪਅੱਪ ਕੰਸੋਲ ਵਿੱਚ ਅਸੀਂ ਦੁਬਾਰਾ ਕਈ ਕੁੰਜੀਆਂ ਜੋੜਾਂਗੇ। ਇਸ ਵਾਰ ਉਹ ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ ਵੀ ਖਤਮ ਹੋਏ:

ਜਦੋਂ ਬੈਕਗ੍ਰਾਉਂਡ ਪੇਜ ਨੂੰ ਰੀਲੋਡ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਜਾਣਕਾਰੀ ਥਾਂ 'ਤੇ ਰਹਿੰਦੀ ਹੈ।

ਇਸ ਬਿੰਦੂ ਤੱਕ ਦੇ ਸਾਰੇ ਐਪਲੀਕੇਸ਼ਨ ਕੋਡ ਨੂੰ ਦੇਖਿਆ ਜਾ ਸਕਦਾ ਹੈ ਇੱਥੇ.

ਪ੍ਰਾਈਵੇਟ ਕੁੰਜੀਆਂ ਦੀ ਸੁਰੱਖਿਅਤ ਸਟੋਰੇਜ

ਸਪਸ਼ਟ ਟੈਕਸਟ ਵਿੱਚ ਨਿੱਜੀ ਕੁੰਜੀਆਂ ਨੂੰ ਸਟੋਰ ਕਰਨਾ ਅਸੁਰੱਖਿਅਤ ਹੈ: ਹਮੇਸ਼ਾ ਇੱਕ ਮੌਕਾ ਹੁੰਦਾ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਹੈਕ ਕੀਤਾ ਜਾਵੇਗਾ, ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਾਪਤ ਕਰੋ, ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਹੋਰ ਵੀ। ਇਸ ਲਈ, ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ ਅਸੀਂ ਕੁੰਜੀਆਂ ਨੂੰ ਇੱਕ ਪਾਸਵਰਡ-ਏਨਕ੍ਰਿਪਟਡ ਰੂਪ ਵਿੱਚ ਸਟੋਰ ਕਰਾਂਗੇ।

ਵਧੇਰੇ ਸੁਰੱਖਿਆ ਲਈ, ਅਸੀਂ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਇੱਕ ਲਾਕ ਸਟੇਟ ਜੋੜਾਂਗੇ, ਜਿਸ ਵਿੱਚ ਕੁੰਜੀਆਂ ਤੱਕ ਕੋਈ ਪਹੁੰਚ ਨਹੀਂ ਹੋਵੇਗੀ। ਸਮਾਂ ਸਮਾਪਤ ਹੋਣ ਕਾਰਨ ਅਸੀਂ ਆਪਣੇ ਆਪ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਲੌਕ ਕੀਤੀ ਸਥਿਤੀ ਵਿੱਚ ਤਬਦੀਲ ਕਰ ਦੇਵਾਂਗੇ।

Mobx ਤੁਹਾਨੂੰ ਡੇਟਾ ਦਾ ਸਿਰਫ ਇੱਕ ਘੱਟੋ-ਘੱਟ ਸੈੱਟ ਸਟੋਰ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਅਤੇ ਬਾਕੀ ਦੀ ਗਣਨਾ ਇਸ ਦੇ ਆਧਾਰ 'ਤੇ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਅਖੌਤੀ ਗਣਨਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ. ਉਹਨਾਂ ਦੀ ਤੁਲਨਾ ਡੇਟਾਬੇਸ ਵਿੱਚ ਵਿਯੂਜ਼ ਨਾਲ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ:

import {observable, action} from 'mobx';
import {setupDnode} from "./utils/setupDnode";
// Утилиты для безопасного шифрования строк. Используют crypto-js
import {encrypt, decrypt} from "./utils/cryptoUtils";

export class SignerApp {
    constructor(initState = {}) {
        this.store = observable.object({
            // Храним пароль и зашифрованные ключи. Если пароль null - приложение locked
            password: null,
            vault: initState.vault,

            // Геттеры для вычислимых полей. Можно провести аналогию с view в бд.
            get locked(){
                return this.password == null
            },
            get keys(){
                return this.locked ?
                    undefined :
                    SignerApp._decryptVault(this.vault, this.password)
            },
            get initialized(){
                return this.vault !== undefined
            }
        })
    }
    // Инициализация пустого хранилища новым паролем
    @action
    initVault(password){
        this.store.vault = SignerApp._encryptVault([], password)
    }
    @action
    lock() {
        this.store.password = null
    }
    @action
    unlock(password) {
        this._checkPassword(password);
        this.store.password = password
    }
    @action
    addKey(key) {
        this._checkLocked();
        this.store.vault = SignerApp._encryptVault(this.store.keys.concat(key), this.store.password)
    }
    @action
    removeKey(index) {
        this._checkLocked();
        this.store.vault = SignerApp._encryptVault([
                ...this.store.keys.slice(0, index),
                ...this.store.keys.slice(index + 1)
            ],
            this.store.password
        )
    }

    ... // код подключения и api

    // private
    _checkPassword(password) {
        SignerApp._decryptVault(this.store.vault, password);
    }

    _checkLocked() {
        if (this.store.locked){
            throw new Error('App is locked')
        }
    }

    // Методы для шифровки/дешифровки хранилища
    static _encryptVault(obj, pass){
        const jsonString = JSON.stringify(obj)
        return encrypt(jsonString, pass)
    }

    static _decryptVault(str, pass){
        if (str === undefined){
            throw new Error('Vault not initialized')
        }
        try {
            const jsonString = decrypt(str, pass)
            return JSON.parse(jsonString)
        }catch (e) {
            throw new Error('Wrong password')
        }
    }
}

ਹੁਣ ਅਸੀਂ ਸਿਰਫ ਐਨਕ੍ਰਿਪਟਡ ਕੁੰਜੀਆਂ ਅਤੇ ਪਾਸਵਰਡ ਸਟੋਰ ਕਰਦੇ ਹਾਂ। ਬਾਕੀ ਸਭ ਕੁਝ ਗਿਣਿਆ ਜਾਂਦਾ ਹੈ. ਅਸੀਂ ਰਾਜ ਤੋਂ ਪਾਸਵਰਡ ਨੂੰ ਹਟਾ ਕੇ ਇੱਕ ਲੌਕਡ ਰਾਜ ਵਿੱਚ ਟ੍ਰਾਂਸਫਰ ਕਰਦੇ ਹਾਂ। ਜਨਤਕ API ਕੋਲ ਹੁਣ ਸਟੋਰੇਜ਼ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਇੱਕ ਢੰਗ ਹੈ।

ਏਨਕ੍ਰਿਪਸ਼ਨ ਲਈ ਲਿਖਿਆ ਗਿਆ crypto-js ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਉਪਯੋਗਤਾਵਾਂ:

import CryptoJS from 'crypto-js'

// Используется для осложнения подбора пароля перебором. На каждый вариант пароля злоумышленнику придется сделать 5000 хешей
function strengthenPassword(pass, rounds = 5000) {
    while (rounds-- > 0){
        pass = CryptoJS.SHA256(pass).toString()
    }
    return pass
}

export function encrypt(str, pass){
    const strongPass = strengthenPassword(pass);
    return CryptoJS.AES.encrypt(str, strongPass).toString()
}

export function decrypt(str, pass){
    const strongPass = strengthenPassword(pass)
    const decrypted = CryptoJS.AES.decrypt(str, strongPass);
    return decrypted.toString(CryptoJS.enc.Utf8)
}

ਬ੍ਰਾਉਜ਼ਰ ਵਿੱਚ ਇੱਕ ਨਿਸ਼ਕਿਰਿਆ API ਹੈ ਜਿਸ ਦੁਆਰਾ ਤੁਸੀਂ ਇੱਕ ਇਵੈਂਟ ਦੀ ਗਾਹਕੀ ਲੈ ਸਕਦੇ ਹੋ - ਸਥਿਤੀ ਤਬਦੀਲੀਆਂ। ਰਾਜ, ਇਸ ਅਨੁਸਾਰ, ਹੋ ਸਕਦਾ ਹੈ idle, active и locked. ਨਿਸ਼ਕਿਰਿਆ ਲਈ ਤੁਸੀਂ ਇੱਕ ਸਮਾਂ ਸਮਾਪਤੀ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ, ਅਤੇ OS ਦੇ ਬਲੌਕ ਹੋਣ 'ਤੇ ਲੌਕ ਸੈੱਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਅਸੀਂ ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ ਸੇਵ ਕਰਨ ਲਈ ਚੋਣਕਾਰ ਨੂੰ ਵੀ ਬਦਲਾਂਗੇ:

import {reaction, toJS} from 'mobx';
import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import {SignerApp} from "./SignerApp";
import {loadState, saveState} from "./utils/localStorage";

const DEV_MODE = process.env.NODE_ENV !== 'production';
const IDLE_INTERVAL = 30;

setupApp();

function setupApp() {
    const initState = loadState();
    const app = new SignerApp(initState);

    if (DEV_MODE) {
        global.app = app;
    }

    // Теперь мы явно узываем поле, которому будет происходить доступ, reaction отработает нормально
    reaction(
        () => ({
            vault: app.store.vault
        }),
        saveState
    );

    // Таймаут бездействия, когда сработает событие
    extensionApi.idle.setDetectionInterval(IDLE_INTERVAL);
    // Если пользователь залочил экран или бездействовал в течение указанного интервала лочим приложение
    extensionApi.idle.onStateChanged.addListener(state => {
        if (['locked', 'idle'].indexOf(state) > -1) {
            app.lock()
        }
    });

    // Connect to other contexts
    extensionApi.runtime.onConnect.addListener(connectRemote);

    function connectRemote(remotePort) {
        const processName = remotePort.name;
        const portStream = new PortStream(remotePort);
        if (processName === 'contentscript') {
            const origin = remotePort.sender.url
            app.connectPage(portStream, origin)
        } else {
            app.connectPopup(portStream)
        }
    }
}

ਇਸ ਕਦਮ ਤੋਂ ਪਹਿਲਾਂ ਦਾ ਕੋਡ ਹੈ ਇੱਥੇ.

ਟ੍ਰਾਂਜੈਕਸ਼ਨਾਂ

ਇਸ ਲਈ, ਅਸੀਂ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਚੀਜ਼ 'ਤੇ ਆਉਂਦੇ ਹਾਂ: ਬਲਾਕਚੈਨ 'ਤੇ ਲੈਣ-ਦੇਣ ਬਣਾਉਣਾ ਅਤੇ ਹਸਤਾਖਰ ਕਰਨਾ। ਅਸੀਂ WAVES ਬਲਾਕਚੈਨ ਅਤੇ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਲਹਿਰਾਂ - ਲੈਣ-ਦੇਣ.

ਪਹਿਲਾਂ, ਆਓ ਰਾਜ ਵਿੱਚ ਉਹਨਾਂ ਸੁਨੇਹਿਆਂ ਦੀ ਇੱਕ ਲੜੀ ਸ਼ਾਮਲ ਕਰੀਏ ਜਿਨ੍ਹਾਂ 'ਤੇ ਦਸਤਖਤ ਕੀਤੇ ਜਾਣ ਦੀ ਲੋੜ ਹੈ, ਫਿਰ ਇੱਕ ਨਵਾਂ ਸੁਨੇਹਾ ਜੋੜਨ, ਦਸਤਖਤ ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਅਤੇ ਇਨਕਾਰ ਕਰਨ ਲਈ ਵਿਧੀਆਂ ਸ਼ਾਮਲ ਕਰੋ:

import {action, observable, reaction} from 'mobx';
import uuid from 'uuid/v4';
import {signTx} from '@waves/waves-transactions'
import {setupDnode} from "./utils/setupDnode";
import {decrypt, encrypt} from "./utils/cryptoUtils";

export class SignerApp {

    ...

    @action
    newMessage(data, origin) {
        // Для каждого сообщения создаем метаданные с id, статусом, выременем создания и тд.
        const message = observable.object({
            id: uuid(), // Идентификатор, используюю uuid
            origin, // Origin будем впоследствии показывать в интерфейсе
            data, //
            status: 'new', // Статусов будет четыре: new, signed, rejected и failed
            timestamp: Date.now()
        });
        console.log(`new message: ${JSON.stringify(message, null, 2)}`);

        this.store.messages.push(message);

        // Возвращаем промис внутри которого mobx мониторит изменения сообщения. Как только статус поменяется мы зарезолвим его
        return new Promise((resolve, reject) => {
            reaction(
                () => message.status, //Будем обсервить статус сообщеня
                (status, reaction) => { // второй аргумент это ссылка на сам reaction, чтобы его можно было уничтожть внутри вызова
                    switch (status) {
                        case 'signed':
                            resolve(message.data);
                            break;
                        case 'rejected':
                            reject(new Error('User rejected message'));
                            break;
                        case 'failed':
                            reject(new Error(message.err.message));
                            break;
                        default:
                            return
                    }
                    reaction.dispose()
                }
            )
        })
    }
    @action
    approve(id, keyIndex = 0) {
        const message = this.store.messages.find(msg => msg.id === id);
        if (message == null) throw new Error(`No msg with id:${id}`);
        try {
            message.data = signTx(message.data, this.store.keys[keyIndex]);
            message.status = 'signed'
        } catch (e) {
            message.err = {
                stack: e.stack,
                message: e.message
            };
            message.status = 'failed'
            throw e
        }
    }
    @action
    reject(id) {
        const message = this.store.messages.find(msg => msg.id === id);
        if (message == null) throw new Error(`No msg with id:${id}`);
        message.status = 'rejected'
    }

    ...
}

ਜਦੋਂ ਅਸੀਂ ਇੱਕ ਨਵਾਂ ਸੁਨੇਹਾ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਾਂ, ਅਸੀਂ ਇਸ ਵਿੱਚ ਮੈਟਾਡੇਟਾ ਜੋੜਦੇ ਹਾਂ, ਕਰੋ observable ਅਤੇ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ store.messages.

ਜੇਕਰ ਤੁਸੀਂ ਨਹੀਂ ਕਰਦੇ observable ਹੱਥੀਂ, ਫਿਰ mobx ਐਰੇ ਵਿੱਚ ਸੁਨੇਹੇ ਜੋੜਨ ਵੇਲੇ ਇਹ ਆਪਣੇ ਆਪ ਕਰੇਗਾ। ਹਾਲਾਂਕਿ, ਇਹ ਇੱਕ ਨਵੀਂ ਵਸਤੂ ਬਣਾਏਗਾ ਜਿਸਦਾ ਸਾਡੇ ਕੋਲ ਕੋਈ ਹਵਾਲਾ ਨਹੀਂ ਹੋਵੇਗਾ, ਪਰ ਸਾਨੂੰ ਅਗਲੇ ਪੜਾਅ ਲਈ ਇਸਦੀ ਲੋੜ ਪਵੇਗੀ।

ਅੱਗੇ, ਅਸੀਂ ਇੱਕ ਵਾਅਦਾ ਵਾਪਸ ਕਰਦੇ ਹਾਂ ਜੋ ਸੁਨੇਹੇ ਦੀ ਸਥਿਤੀ ਬਦਲਣ 'ਤੇ ਹੱਲ ਹੋ ਜਾਂਦਾ ਹੈ। ਸਥਿਤੀ ਦੀ ਪ੍ਰਤੀਕ੍ਰਿਆ ਦੁਆਰਾ ਨਿਗਰਾਨੀ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਜੋ ਸਥਿਤੀ ਦੇ ਬਦਲਣ 'ਤੇ "ਆਪਣੇ ਆਪ ਨੂੰ ਮਾਰ ਦੇਵੇਗੀ"।

ਵਿਧੀ ਕੋਡ approve и reject ਬਹੁਤ ਹੀ ਸਧਾਰਨ: ਅਸੀਂ ਸਿਰਫ਼ ਸੁਨੇਹੇ ਦੀ ਸਥਿਤੀ ਨੂੰ ਬਦਲਦੇ ਹਾਂ, ਜੇਕਰ ਲੋੜ ਹੋਵੇ ਤਾਂ ਇਸ 'ਤੇ ਦਸਤਖਤ ਕਰਨ ਤੋਂ ਬਾਅਦ।

ਅਸੀਂ UI API ਵਿੱਚ ਮਨਜ਼ੂਰ ਅਤੇ ਅਸਵੀਕਾਰ ਕਰਦੇ ਹਾਂ, ਪੰਨਾ API ਵਿੱਚ ਨਵਾਂ ਸੁਨੇਹਾ:

export class SignerApp {
    ...
    popupApi() {
        return {
            addKey: async (key) => this.addKey(key),
            removeKey: async (index) => this.removeKey(index),

            lock: async () => this.lock(),
            unlock: async (password) => this.unlock(password),
            initVault: async (password) => this.initVault(password),

            approve: async (id, keyIndex) => this.approve(id, keyIndex),
            reject: async (id) => this.reject(id)
        }
    }

    pageApi(origin) {
        return {
            signTransaction: async (txParams) => this.newMessage(txParams, origin)
        }
    }

    ...
}

ਆਉ ਹੁਣ ਐਕਸਟੈਂਸ਼ਨ ਨਾਲ ਟ੍ਰਾਂਜੈਕਸ਼ਨ 'ਤੇ ਦਸਤਖਤ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੀਏ:

ਆਮ ਤੌਰ 'ਤੇ, ਸਭ ਕੁਝ ਤਿਆਰ ਹੈ, ਜੋ ਕੁਝ ਰਹਿੰਦਾ ਹੈ ਸਧਾਰਨ UI ਸ਼ਾਮਲ ਕਰੋ.

UI

ਇੰਟਰਫੇਸ ਨੂੰ ਐਪਲੀਕੇਸ਼ਨ ਸਥਿਤੀ ਤੱਕ ਪਹੁੰਚ ਦੀ ਲੋੜ ਹੈ। UI ਵਾਲੇ ਪਾਸੇ ਅਸੀਂ ਕਰਾਂਗੇ observable ਸਟੇਟ ਅਤੇ API ਵਿੱਚ ਇੱਕ ਫੰਕਸ਼ਨ ਜੋੜੋ ਜੋ ਇਸ ਸਥਿਤੀ ਨੂੰ ਬਦਲ ਦੇਵੇਗਾ। ਆਓ ਜੋੜੀਏ observable ਬੈਕਗਰਾਊਂਡ ਤੋਂ ਪ੍ਰਾਪਤ API ਵਸਤੂ ਨੂੰ:

import {observable} from 'mobx'
import {extensionApi} from "./utils/extensionApi";
import {PortStream} from "./utils/PortStream";
import {cbToPromise, setupDnode, transformMethods} from "./utils/setupDnode";
import {initApp} from "./ui/index";

const DEV_MODE = process.env.NODE_ENV !== 'production';

setupUi().catch(console.error);

async function setupUi() {
    // Подключаемся к порту, создаем из него стрим
    const backgroundPort = extensionApi.runtime.connect({name: 'popup'});
    const connectionStream = new PortStream(backgroundPort);

    // Создаем пустой observable для состояния background'a
    let backgroundState = observable.object({});
    const api = {
        //Отдаем бекграунду функцию, которая будет обновлять observable
        updateState: async state => {
            Object.assign(backgroundState, state)
        }
    };

    // Делаем RPC объект
    const dnode = setupDnode(connectionStream, api);
    const background = await new Promise(resolve => {
        dnode.once('remote', remoteApi => {
            resolve(transformMethods(cbToPromise, remoteApi))
        })
    });

    // Добавляем в background observable со стейтом
    background.state = backgroundState;

    if (DEV_MODE) {
        global.background = background;
    }

    // Запуск интерфейса
    await initApp(background)
}

ਅੰਤ ਵਿੱਚ ਅਸੀਂ ਐਪਲੀਕੇਸ਼ਨ ਇੰਟਰਫੇਸ ਨੂੰ ਰੈਂਡਰ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰਦੇ ਹਾਂ। ਇਹ ਇੱਕ ਪ੍ਰਤੀਕਿਰਿਆ ਐਪਲੀਕੇਸ਼ਨ ਹੈ। ਬੈਕਗਰਾਊਂਡ ਆਬਜੈਕਟ ਨੂੰ ਪ੍ਰੋਪਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪਾਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਹ ਸਹੀ ਹੋਵੇਗਾ, ਬੇਸ਼ਕ, ਤਰੀਕਿਆਂ ਲਈ ਇੱਕ ਵੱਖਰੀ ਸੇਵਾ ਅਤੇ ਰਾਜ ਲਈ ਇੱਕ ਸਟੋਰ ਬਣਾਉਣਾ, ਪਰ ਇਸ ਲੇਖ ਦੇ ਉਦੇਸ਼ਾਂ ਲਈ ਇਹ ਕਾਫ਼ੀ ਹੈ:

import {render} from 'react-dom'
import App from './App'
import React from "react";

// Инициализируем приложение с background объектом в качест ве props
export async function initApp(background){
    render(
        <App background={background}/>,
        document.getElementById('app-content')
    );
}

Mobx ਦੇ ਨਾਲ ਜਦੋਂ ਡੇਟਾ ਬਦਲਦਾ ਹੈ ਤਾਂ ਰੈਂਡਰਿੰਗ ਸ਼ੁਰੂ ਕਰਨਾ ਬਹੁਤ ਆਸਾਨ ਹੈ। ਅਸੀਂ ਬਸ ਪੈਕੇਜ ਤੋਂ ਨਿਰੀਖਕ ਸਜਾਵਟ ਵਾਲੇ ਨੂੰ ਲਟਕਦੇ ਹਾਂ mobx-ਪ੍ਰਤੀਕਰਮ ਕੰਪੋਨੈਂਟ 'ਤੇ, ਅਤੇ ਰੈਂਡਰ ਨੂੰ ਆਟੋਮੈਟਿਕ ਹੀ ਕਾਲ ਕੀਤਾ ਜਾਵੇਗਾ ਜਦੋਂ ਕੰਪੋਨੈਂਟ ਬਦਲਾਅ ਦੁਆਰਾ ਹਵਾਲਾ ਦਿੱਤਾ ਗਿਆ ਕੋਈ ਵੀ ਨਿਰੀਖਣਯੋਗ. ਤੁਹਾਨੂੰ ਕਿਸੇ ਵੀ ਮੈਪਸਟੇਟ ਟੂਪ੍ਰੌਪਸ ਜਾਂ redux ਵਾਂਗ ਕਨੈਕਟ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਹਰ ਚੀਜ਼ ਬਾਕਸ ਤੋਂ ਬਾਹਰ ਕੰਮ ਕਰਦੀ ਹੈ:

import React, {Component, Fragment} from 'react'
import {observer} from "mobx-react";
import Init from './components/Initialize'
import Keys from './components/Keys'
import Sign from './components/Sign'
import Unlock from './components/Unlock'

@observer // У Компонета с этим декоратом будет автоматически вызван метод render, если будут изменены observable на которые он ссылается
export default class App extends Component {

    // Правильно конечно вынести логику рендера страниц в роутинг и не использовать вложенные тернарные операторы,
    // и привязывать observable и методы background непосредственно к тем компонентам, которые их используют
    render() {
        const {keys, messages, initialized, locked} = this.props.background.state;
        const {lock, unlock, addKey, removeKey, initVault, deleteVault, approve, reject} = this.props.background;

        return <Fragment>
            {!initialized
                ?
                <Init onInit={initVault}/>
                :
                locked
                    ?
                    <Unlock onUnlock={unlock}/>
                    :
                    messages.length > 0
                        ?
                        <Sign keys={keys} message={messages[messages.length - 1]} onApprove={approve} onReject={reject}/>
                        :
                        <Keys keys={keys} onAdd={addKey} onRemove={removeKey}/>
            }
            <div>
                {!locked && <button onClick={() => lock()}>Lock App</button>}
                {initialized && <button onClick={() => deleteVault()}>Delete all keys and init</button>}
            </div>
        </Fragment>
    }
}

ਬਾਕੀ ਬਚੇ ਭਾਗਾਂ ਨੂੰ ਕੋਡ ਵਿੱਚ ਦੇਖਿਆ ਜਾ ਸਕਦਾ ਹੈ UI ਫੋਲਡਰ ਵਿੱਚ.

ਹੁਣ ਐਪਲੀਕੇਸ਼ਨ ਕਲਾਸ ਵਿੱਚ ਤੁਹਾਨੂੰ UI ਲਈ ਇੱਕ ਰਾਜ ਚੋਣਕਾਰ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਜਦੋਂ ਇਹ ਬਦਲਦਾ ਹੈ ਤਾਂ UI ਨੂੰ ਸੂਚਿਤ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਅਜਿਹਾ ਕਰਨ ਲਈ, ਆਓ ਇੱਕ ਢੰਗ ਜੋੜੀਏ getState и reactionਕਾਲ ਕਰਨਾ remote.updateState:

import {action, observable, reaction} from 'mobx';
import uuid from 'uuid/v4';
import {signTx} from '@waves/waves-transactions'
import {setupDnode} from "./utils/setupDnode";
import {decrypt, encrypt} from "./utils/cryptoUtils";

export class SignerApp {

    ...

    // public
    getState() {
        return {
            keys: this.store.keys,
            messages: this.store.newMessages,
            initialized: this.store.initialized,
            locked: this.store.locked
        }
    }

    ...

    //
    connectPopup(connectionStream) {
        const api = this.popupApi();
        const dnode = setupDnode(connectionStream, api);

        dnode.once('remote', (remote) => {
            // Создаем reaction на изменения стейта, который сделает вызовет удаленну процедуру и обновит стейт в ui процессе
            const updateStateReaction = reaction(
                () => this.getState(),
                (state) => remote.updateState(state),
                // Третьим аргументом можно передавать параметры. fireImmediatly значит что reaction выполниться первый раз сразу.
                // Это необходимо, чтобы получить начальное состояние. Delay позволяет установить debounce
                {fireImmediately: true, delay: 500}
            );
            // Удалим подписку при отключении клиента
            dnode.once('end', () => updateStateReaction.dispose())

        })
    }

    ...
}

ਇੱਕ ਵਸਤੂ ਪ੍ਰਾਪਤ ਕਰਨ ਵੇਲੇ remote ਬਣਾਇਆ ਜਾ ਰਿਹਾ ਹੈ reaction UI ਸਾਈਡ 'ਤੇ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਨ ਵਾਲੀ ਸਥਿਤੀ ਨੂੰ ਬਦਲਣ ਲਈ।

ਅੰਤਮ ਛੋਹ ਐਕਸਟੈਂਸ਼ਨ ਆਈਕਨ 'ਤੇ ਨਵੇਂ ਸੰਦੇਸ਼ਾਂ ਦੇ ਡਿਸਪਲੇ ਨੂੰ ਜੋੜਨਾ ਹੈ:

function setupApp() {
...

    // Reaction на выставление текста беджа.
    reaction(
        () => app.store.newMessages.length > 0 ? app.store.newMessages.length.toString() : '',
        text => extensionApi.browserAction.setBadgeText({text}),
        {fireImmediately: true}
    );

...
}

ਇਸ ਲਈ, ਐਪਲੀਕੇਸ਼ਨ ਤਿਆਰ ਹੈ. ਵੈੱਬ ਪੰਨੇ ਲੈਣ-ਦੇਣ ਲਈ ਦਸਤਖਤ ਦੀ ਬੇਨਤੀ ਕਰ ਸਕਦੇ ਹਨ:

ਕੋਡ ਇੱਥੇ ਉਪਲਬਧ ਹੈ ਲਿੰਕ ਨੂੰ.

ਸਿੱਟਾ

ਜੇਕਰ ਤੁਸੀਂ ਲੇਖ ਨੂੰ ਅੰਤ ਤੱਕ ਪੜ੍ਹ ਲਿਆ ਹੈ, ਪਰ ਫਿਰ ਵੀ ਸਵਾਲ ਹਨ, ਤਾਂ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਇੱਥੇ ਪੁੱਛ ਸਕਦੇ ਹੋ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਨਾਲ ਰਿਪੋਜ਼ਟਰੀਆਂ. ਉੱਥੇ ਤੁਹਾਨੂੰ ਹਰੇਕ ਮਨੋਨੀਤ ਕਦਮ ਲਈ ਕਮਿਟ ਵੀ ਮਿਲਣਗੇ।

ਅਤੇ ਜੇਕਰ ਤੁਸੀਂ ਅਸਲ ਐਕਸਟੈਂਸ਼ਨ ਲਈ ਕੋਡ ਨੂੰ ਦੇਖਣ ਵਿੱਚ ਦਿਲਚਸਪੀ ਰੱਖਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇਸਨੂੰ ਲੱਭ ਸਕਦੇ ਹੋ ਇੱਥੇ.

ਤੋਂ ਕੋਡ, ਰਿਪੋਜ਼ਟਰੀ ਅਤੇ ਨੌਕਰੀ ਦਾ ਵੇਰਵਾ siemarell

ਸਰੋਤ: www.habr.com