Catch 되지 않는 형식 오류:읽을 수 없는 속성의 null(독서'매개 변')크롬 확장 프로그램

0

질문

내가 만드는 자동완성 chrome extension. 즉,일단 버튼을 눌러 입력 폼에서 콘텐츠를 웹 페이지에 의해 채워에서 텍스트 popup.html. 나이"읽을 수 없는 속성의 null"오류가 발생 어디에서 추가신을 내 버튼입니다. [Catch 되지 않는 형식 오류:읽을 수 없는 속성의 null(독서'매개 변')][1]

여기에 내에 html 파일

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Autofill</title>
    <link rel="stylesheet" href="style.css">
    
  </head>
  <body>

    <p id="testText">Text to put</p>
  
    <button id="fillForm">Fill!</button>

    
    <script src="app.js" ></script>
  </body>
  
</html>

여기에 나 app.js

console.log('background running!!!')
let testtext = document.getElementById('testText')

let button = document.getElementById('fillForm')
button.addEventListener('click', buttonClick);

function buttonClick(){
    params = {
        active: true,
        currentWindow: true
    }
    chrome.tabs.query(params, gotTabs);

    function gotTabs(tabs){
        let text = testtext.innerHTML
        let content = {
        username: text
        } 
        chrome.tabs.sendMessage(tabs[0].id, content);
    }
}

여기에 나 content.js

console.log("Receiving message...")
chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message, sender, sendReponse){
    document.getElementById('email').value = content.username
    
}

마지막으로,내 나타납니다.json

{
    "name": "Resume Autofiller",
    "description": "Build an Extension!",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action":{
        "default_popup": "index.html"
    },
    "permissions": [
        "activeTab",
        "<all_urls>"
    ],
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": [ "content.js" ]
        } 
    ],
    "background": {
        "scripts": ["app.js"]
      }
    
  }

내가 온라인으로 읽는 내가 내 스크립트 태그의 맨 아래에 몸을 태그,하지만 나는 아직도 이 오류가 있습니다. 나는 같은 느낌이 나는 감독하는 뭔가가 분명하다,따라서 어떤 도움을 진심으로 감사합니다. 감사합니다! 첨부되어 오류가 나 얻고 있다. [1]: https://i.stack.imgur.com/GyNXO.png

1

최고의 응답

0

로는 말했다,배경을 제거하는 매니페스트에서 해결되지만,그 개념적 혼합에 있는 코드 샘플이처럼 왜 이유를 설명하기 위한 솔루션을 작동합니다.

스크립트라고 app.js 을 것 같다하기위한 팝업 스크립트,하지만으로 사용되는 배경에서 스크립트 예제입니다. 팝업 창에서 다른 배경입니다. 그것을 이해하는 데 도움이 될 것입니다 사이의 차이를 이러한 두 가지 확장자 부품과 사용 사례를 보여주고 있습니다. 의 연속성,다음과 같은 설명을 참조할 것이 MV3 전 및 약관습니다.

배경: "경 서비스는 작업자로드 할 때 그것은 필요,언로드 할 때 그것은 유휴[...]배경 구조트 주위에 이벤트의 확장자에 따라 달라집니다. 을 정의하는 기능적으로 관련 이벤트를 할 수 있습 배경은 스크립트를하면 거짓말을 때까지 해당 이벤트 발생을 방지 확장에서 누락된 중요한 트리거합니다." (이벤트를 관리 서비스 노동자)추가적인 참고:배경이 그대로 에서 배경없이 볼 수 있 사용자 인터페이스가 있습니다. 사용자는지와 상호 작용에서 버튼을 배경(지만 그것이 가능한 이벤트를 보내기 위해 배경한 처리를 통해 메시지를 전달하). 고려 배경으로 단일.

팝업: 이것은 하나의 가능한 장소를 위한 UI 를 제공하는 확장자. 팝업에 의해 활성화된 사용자 클릭하여 확장 프로그램 아이콘,그리고 파괴되면 팝업에 초점을 잃(도면 탭을 닫),그리고 다시 로드할 때 다시 사용자 아이콘을 클릭하면 다음 시간입니다. "좋아요 배경은 스크립트,이 파일에 선언되어야 합니페스트에 위해 크롬을 현재에 확장합니다. 이를 위해 추가 작업체를 명시와 설정 popup.html 으로 작업의 default_popup." (을 소개하는 사용자 인터페이스). 팝업에서 추가할 수 있는 버튼과 다른 요소에 대한 사용자를 클릭합니다. 팝업이 특정하여 각각의 탭을 누릅니다. 개 여러 브라우저 윈도우와 아이콘을 클릭하면,여러 개의 팝업에 열 수 있습니다 같은 시간입니다.

에 오류가 나오는 보고에서 단추를 위한 요소,배경이 없는 경우 같은 버튼을 제거하는 매니페스트 키를 이러한 문제를 방지합니다.


최소한의 작동 예시

manifest.json: background 키 제거

{
  "name": "Resume Autofiller",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action":{
    "default_popup": "index.html"
  },
  "permissions": [
    "activeTab",
    "<all_urls>"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [ "content.js" ]
    }
  ]
}

index.html:변화없

(스타일입니다.css 인상 발생하지 않지만,문제가 되지 않는 이에 대한 질문에)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Autofill</title>
    <link rel="stylesheet" href="style.css">
    
  </head>
  <body>

    <p id="testText">Text to put</p>
  
    <button id="fillForm">Fill!</button>

    
    <script src="app.js" ></script>
  </body>
  
</html>

app.js:변경된 로그인 텍스트,큰 변화 없

console.log('popup running!!!')
let testtext = document.getElementById('testText')

let button = document.getElementById('fillForm')
button.addEventListener('click', buttonClick);

function buttonClick(){
    params = {
        active: true,
        currentWindow: true
    }
    chrome.tabs.query(params, gotTabs);

    function gotTabs(tabs){
        let text = testtext.innerHTML
        let content = {
            username: text
        }
        chrome.tabs.sendMessage(tabs[0].id, content);
    }
}

content.js:변경로그 출력을 조금,주석으로 할당

chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message, sender, sendResponse){
    console.log("Receiving message...")
    console.log('message', JSON.stringify(message));
    // next line has undefined references, commenting out
    // document.getElementById('email').value = content.username
}
2021-11-21 21:21:52

감사합니다,나는 배경을 제거에서 스크립트는 매니페스트,그러나 나는 여전히 같은 오류가 있습니다. 과거와 현재의 유일한 차이점은 컨텍스트를 출력한 현재의 탭을 나는 대조적으로,_generated_background_page.html 는 다음과 같다. 온라인 독서,해결하는 방법"속성을 null 로 설정"버튼 중 하나에 의해 확인 명명 또는 실를 추가하는 경우 이벤트가 수신기있는 나는 모두가 구입하실 수 있습니다.
Chris Wu

OK,나를 후 최소한의 작동 예입니다. 내 편집 대답이다.
Neea

이에서 배경지 않는 한 그것은 프로그래밍 방식으로 생성되는 첫 번째. getElementById 이 계속 반환 정의되지 않은 검사 후에 이름 또는 기다리는 내용을 로드. 배경으로 생각해야한다 헤드리스(지에 mv2 보를 생성되는 페이지만,실제 사용자는지 그것을 참조).
Neea

와우는 명확히 많은 것들을,내가 그것을 작동합니다. 많은 감사!!!! 그것은 함께 할 수 있었는 메시지를 전달(메시지입니다.사용자 이름 대신 내용입니다.사용자 이름)
Chris Wu

다른 언어로

이 페이지는 다른 언어로되어 있습니다

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................