Firefox 브라우저 확장 - 1 만들기

2년 전에 나는 많은 Firefox 확장 (총 23개) 을 만들었는데, 이를 부가 구성 요소라고도 부른다.천천히 나는 다른 항목으로 넘어가서 그것들을 잊어버렸다.최근에 나는 긍정적인 평가를 받았고, 확장되고 이메일 통지를 받았다.
이어서 저는 바닐라 JS를 연습하고 싶습니다. 평소와 같이 그중에서 몇 가지 프로젝트를 하고 싶습니다.Firefox 확장은 HTML, CSS, Vanilla JS로 만들어졌기 때문에 Vanilla JS를 연습하는 가장 좋은 방법입니다.
너는 나의 모든 Firefox 확장 here 을 찾을 수 있다.그러니 계속 설치해 주세요.
내 내선
우리가 인코딩을 깊이 연구하기 전에, 나는 어쩔 수 없이 인정해야 한다.나는mozilla 계정에 대한 접근 권한을 잃었고, 이 계정에서 두 단계의 신분 검증을 사용했다.나는 낡은 휴대전화의 인증서 프로그램과 복구 키를 잃어버렸다.
따라서 기존 확장을 통해 업데이트할 수 없습니다.나는 이 모든 업데이트를 다시 추가하여 블로그에 전체 과정을 기록할 것이다.
Firefox 확장을 배우는 가장 좋은 곳은mdnthis 링크입니다.이 밖에 열차를 코딩하는 하이라이트 유튜브 시리즈도 있다.
우리는 동적 여행 주제를 만들고 이를 Mozilla 플러그인 사이트에 발표할 것이다.입구점과 확장자 중 가장 중요한 파일은 목록입니다.json 파일.그것에 대한 더 많은 정보를 읽을 수 있습니다 here.확장자에 대한 메타데이터를 포함하고 확장자에 있는 다른 파일을 가리키는 바늘도 제공합니다.
따라서 코드 편집기를 열고 목록을 만듭니다.json 파일.다음 내용을 넣으시오.
선적 명세서.json
명세서에서 가장 중요한 일.json 파일입니다. 백엔드 스크립트입니다.이 스크립트는 이 플러그인에 매우 중요합니다. 왜냐하면 사용자 시간과 테마를 변경하기 위해 백엔드에서 영원히 실행해야 하기 때문입니다.배경 스크립트에 대한 내용을 더 많이 읽을 수 있습니다. here
그래서 파일 배경을 만듭니다.js는 폴더에 있습니다.우선, 컨트롤러의 로그를 추가하기만 하면 됩니다. 작동하는지 확인해야 하기 때문입니다.
배경.js
다음에 Firefox 브라우저를 열고 다음 URL을 입력하십시오.그리고 "임시 불러오는 항목 불러오기..."단추를 누르십시오.

about:debugging#/runtime/this-firefox

디버거
그리고 폴더로 이동해서 목록을 클릭하세요.json 파일.
선적 명세서.json
다음으로 확장자가 로드되었으므로 Inspect 버튼을 클릭하십시오.
관광 주제
새 탭에서 콘솔 로그를 가져옵니다.백그라운드 스크립트에는 로그인 브라우저 콘솔이 표시되지 않습니다.
로그
배경을 갱신합시다.js에 이벤트listener를 추가합니다.우리는 브라우저를 통해 이 점을 실현할 것이다.경보팔뚝.그것에 대한 더 많은 정보를 읽을 수 있습니다 here.
현재, 우리는 브라우저의 도움말 아래 5분마다 체크타임 () 함수를 시작합니다.경보창조그것에 대한 더 많은 정보를 읽을 수 있습니다 here.
우리는 처음에 함수 checkTime () 를 호출할 것입니다. 첫 번째 시작을 확장할 때 테마를 표시해야 하기 때문입니다.
배경.js
다시 분신으로 가서 다시 불러오기 단추를 누르면 새로운 변경 사항을 업데이트합니다.
다시 로드
현재 임시 불러오기 항목 불러오기... 단추를 누르면 내부 검사 시간 로그가 5분마다 계속 증가합니다.
로그
다음에 함수 checkTime () 를 업데이트해서 시간 수를 가져오고 새 setTheme () 함수에 시간 수를 전달합니다.
현재 setTheme() 함수는 브라우저를 사용합니다.주제 - 주제를 업데이트합니다.그것에 대한 더 많은 정보를 읽을 수 있습니다 here.
테마 설정()
다음에 테마 대상을 만들어야 합니다. 모든 테마가 전달될 것입니다.

    var currentTheme = '';

    const themes = {
        'travel0': {
            images: {
                theme_frame: 'sun.jpg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: '#111',
            }
        },
        'travel1': {
            images: {
                theme_frame: 'travel1.jpg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'white',
            }
        },
        'travel2': {
            images: {
                theme_frame: 'travel2.jpg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'black',
            }
        },
        'travel3': {
            images: {
                theme_frame: 'travel3.jpg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'black',
            }
        },
        'travel4': {
            images: {
                theme_frame: 'travel4.jpg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'black',
            }
        },
        'travel5': {
            images: {
                theme_frame: 'travel5.jpg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'black',
            }
        },
        'travel6': {
            images: {
                theme_frame: 'travel6.jpg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'white',
            }
        },
        'travel7': {
            images: {
                theme_frame: 'travel7.jpg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'black',
            }
        },
        'travel8': {
            images: {
                theme_frame: 'travel8.jpg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'white',
            }
        },
        'travel9': {
            images: {
                theme_frame: 'travel9.jpg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'black',
            }
        },
        'travel10': {
            images: {
                theme_frame: 'travel10.jpg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'black',
            }
        },
        'travel11': {
            images: {
                theme_frame: 'travel11.jpeg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'black',
            }
        },
        'travel12': {
            images: {
                theme_frame: 'travel12.jpeg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'black',
            }
        },
        'travel13': {
            images: {
                theme_frame: 'travel13.jpg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'white',
            }
        },
        'travel14': {
            images: {
                theme_frame: 'travel14.jpg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'black',
            }
        },
        'travel15': {
            images: {
                theme_frame: 'travel15.png',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'black',
            }
        },
        'travel16': {
            images: {
                theme_frame: 'travel16.jpg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'white',
            }
        },
        'travel17': {
            images: {
                theme_frame: 'travel17.jpg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'black',
            }
        },
        'travel18': {
            images: {
                theme_frame: 'travel15.jpeg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'black',
            }
        },
        'travel19': {
            images: {
                theme_frame: 'travel19.jpeg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'white',
            }
        },
        'travel20': {
            images: {
                theme_frame: 'travel20.png',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'white',
            }
        },
        'travel21': {
            images: {
                theme_frame: 'travel21.jpg',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'white',
            }
        },
        'travel22': {
            images: {
                theme_frame: 'travel22.png',
            },
            colors: {
                frame: '#CF723F',
                tab_background_text: 'white',
            }
        },

    'travel23': {
            images: {
                theme_frame: 'moon.jpg',
            },
            colors: {
                frame: '#000',
                tab_background_text: '#fff',
            }
        }
    };

그런 다음 모든 이미지를 폴더에 추가합니다.
신규 이미지
확장자를 다시 불러올 때, 테마는 시간에 따라 불러옵니다.
주제 로드됨
확장은 완료되었지만,mozilla 플러그인 사이트에 발표하기 전에 아이콘을 추가합니다.명세서에서 다음 내용을 업데이트합니다.json 파일과 이 아이콘을 포함하는 폴더 아이콘을 추가합니다.
선적 명세서.json
우리는 이 확장을 발표해야 하지만, 이 문장이 갈수록 길어지면서, 우리는 다음 문장에서 발표할 것이다.
이 확장된 코드를 찾을 수 있습니다 here.