от новичка до chrome расширение - PullRequest
Новая
       4

от новичка до chrome расширение

2 голосов
/ 16 июня 2020

Я пытаюсь изучить chrome расширений, и я пытаюсь создать простое, которое пытается определить, есть ли формы или нет на веб-странице.

Мой код настолько прост, насколько это возможно, и следующее сниппет - это сценарий содержимого - javascript.js и всплывающая страница - index.html. 

function sendMessage() {
  chrome.extension.sendMessage({
action: "findurls"
  });
}

document.addEventListener('DOMContentLoaded', function () {
  var show = document.getElementById('show');
  show.addEventListener('click', findValidForms);
  });

const findValidForms = () => {
  let list = [];
  let message = "Available forms are: \n ";
  let forms = document.querySelectorAll('form');
  if (forms.length > 0) {
    for (var i = 0; i < forms.length; i++) {
      list.push(forms[i].action);
      message += `<a href="${list[i]}">${list[i]}</a><br />`;
    }
  }
  else {
    message = "no forms";
  }
  alert(message);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>testing</title>
 
    <link rel="stylesheet" type="text/css" href="style.css">


</head>

<body>
    <div id="cgi">
        <div class="heading">
            <h3 center> Test title </h3>
        </div>
  
    <div id='ah!'> </div>
    <button id='show'>find forms</button>
    
    <script src="jquery-3.5.0.min.js"></script>
    <script type="text/javascript" src="javascript.js"></script>

</body>

</html>
manifest:
"manifest_version": 2,
    "name": "form",
    "version": "1.0",
    "description": "find form url ",
    "icons": {
        "16": "chrome_16.png",
        "32": "chrome_32.png"

    },

       "background": {
     "scripts": ["background.js"],
     "persistent": false
  },
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "javascript.js",
                "jquery-3.5.0.min.js"
            ],
            "css": [
                "style.css"
            ]
        }
    ],
    "browser_action": {
        "default_icon": "chrome_16.png",
        "default_popup":"index.html",
        "default_title": "test"
    },
    "permissions": [
        "activeTab"
    ]
}

 background.js:
  chrome.extension.onMessage.addListener(
function(request, sender, sendResponse)
{ 
    if (request.action == "findurls")
        chrome.tabs.executeScript({ file: 'test.js' });
}

);

Спасибо

1 Ответ

2 голосов
/ 16 июня 2020

Щелкнул кнопку, помещенную в index.html, расширение должно отправить сообщение сценарию содержимого - javascript.js в вашем решении. Таким образом, сценарию содержимого требуется прослушиватель событий, который отслеживает сообщение, запускаемое из фонового сценария. По прибытии соответствующий метод должен быть выполнен.

Вот быстрая ссылка для решения, но позвольте мне кратко описать здесь.

  1. Создайте js file (ie index.js) и вставьте в ваш index.html. (честно говоря, popup.html и popup.js будут лучше, чем текущее имя - index ) . Введите этот код в index.js
  2. . В вашем сценарии содержимого - index.js добавьте код для прослушивания сообщения, отправленного из сценария всплывающей страницы (index.js) с обработчиком текущей функции, которую вы создали. (Исходное имя функции было Forms)

popup.js

const sendMessage = () => {
    chrome.tabs.query(
        {
            active: true,
            currentWindow: true
        }, (tabs) => {
            chrome.tabs.sendMessage(
                tabs[0].id,
                {
                    action: "get-urls"
                }, (response) => {
                    console.log(response)
                }
            );
        }
    );
}

document.addEventListener('DOMContentLoaded', function () {
    var geturls = document.getElementById('btn-get-urls');
    geturls.addEventListener('click', sendMessage);
});

content_script.js

const FindAllForms = () => {
    let list = [],
        message = "Available forms are: \n ",
        availableForms = document.querySelectorAll('form');
    if (availableForms.length > 0) {
      for (var i = 0; i < availableForms.length; i++) {
        list.push(availableForms[i].action);
        message += "<a href=" + list[i] + ">" + list[i] + "</a>" + "\n";
      }
    }
    else {
      message = "no forms";
    }
    alert(message);
}
  
chrome.extension.onMessage.addListener(
   (request, sender, sendResponse) => { 
        if (request.action == "get-urls") {
            FindAllForms()
            sendResponse({'success': true})
        }
    }
);

Во всплывающем скрипте вы должны отправить сообщение в скрипт содержимого текущей / активной вкладки как этот ответ .

Надеюсь это поможет вам.

Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...