-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwhat-i-learnt.txt
84 lines (42 loc) · 2.05 KB
/
what-i-learnt.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
Block-It Extension - Learnings and Key Takeaways
1. Chrome Extension Development
Learned how Chrome extensions work and their structure.
Understood the use of manifest.json and its role in defining extension permissions and background scripts.
Explored the different types of Chrome extensions (popup, content scripts, background scripts).
2. Manifest.json File
Configuring permissions (e.g., tabs, storage).
Adding icons and specifying background scripts.
Understanding content_scripts and background properties.
3. Content Scripts and DOM Manipulation
Injecting JavaScript into webpages to modify behavior.
Blocking website content dynamically.
Displaying motivational quotes or meme images instead of blocked websites.
4. Local Storage in Extensions
Using chrome.storage.local to store blocked websites.
Fetching and updating stored data efficiently.
5. Event Listeners and Communication
Implementing event listeners to detect user actions.
6. Popup UI & Styling (HTML, CSS, JavaScript)
Creating a simple and user-friendly popup UI.
Styling with CSS to enhance appearance.
Adding interactivity using JavaScript.
7. Loading and Installing Chrome Extensions
Enabling Developer Mode in Chrome.
Using "Load Unpacked" to install custom extensions.
Pinning the extension for easy access.
8. Handling Images and External Resources
Allowing users to specify custom images for blocked sites.
Loading and displaying images dynamically.
9. Debugging Chrome Extensions
Using console.log() for debugging in Chrome DevTools.
Checking errors in the Extensions tab of Chrome.
Identifying permission issues and fixing them.
10. Project Structuring & Optimization
Organizing files (popup.html, popup.js, content.js, manifest.json).
Keeping code modular and maintainable.
Improving user experience with better UI/UX.
Next Steps & Improvements
Explore background scripts for more complex features.
Add sync storage to save settings across devices.
Implement scheduled blocking (e.g., block sites only during specific hours).
Publish the extension on the Chrome Web Store.