Как передать массив из фона. js для вставки. js (content) скрипт (Chrome расширение) - PullRequest
0 голосов
/ 21 января 2020

Последние два дня я бился головой о стену, пытаясь передать массив из моего фона. Скрипт js в мой инъект. Скрипт js (content), но я не могу понять, это из.

Я нашел этот ресурс в SO с такой же проблемой: Передать переменную массива из фона. js в контент. js

Каким-то образом я все еще могу ' Я, кажется, не понял этого. Кажется, он использовал другой подход, чем я, поскольку я получаю пользовательский ввод для создания массива.

Я пытаюсь отправить массив userHa sh из фона. js для инъекции. js

Манифест. js

{
  "name": "Instagram Automated",
  "version": "1.0",
  "manifest_version": 2,
  "description": "One of the safest Instagram Automation tools on the market.",
  "homepage_url": "http://grantdarling.com",
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "Automated Instagram"
  },
  "permissions": [
    "tabs",
    "notifications",
    "storage",
    "http://www.instagram.com/",
    "https://www.instagram.com/"
  ]
}

всплывающее окно. html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="popup.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
</head>

<body>
  <div class="header-container">
    <h1 id="title">Automated Instagram</h1>
    <img id="insta-logo" src="media/Instagram Logo.svg" />
  </div>
      <img id="insta-glow" src="media/instagram-glow.svg" />
  <div class="content-container">
    <p class="sub-paragraph">Search Hashtag</p>
    <form>
      <input id="hashtagInput" />
      <input type="submit" id="addHashtag" id="grabHashtag" value="Submit Hashtag" />
    </form>
    <div class="divider"></div>
        <p>You have liked <span id="count">0</span> photographs</p>
  <form id="start-auto-form">
    <input type="submit" id="start-auto" value="Start Automation" />
  </form>
  </div>


  <script src="inject.js"></script>
  <script src="popup.js"></script>
</body>

</html>

инъекция. js

    /******************************
    # Inject into URL on submit
    ******************************/
    document.querySelector('#start-auto').addEventListener("click", findUrl);

    function findUrl() {
      console.log(userHash)
      let hashtagUrl = window.open("https://www.instagram.com/explore/tags/" + userHash );
//*This is the area I am trying to push the array to
    }

/*******************************************
# Inject addHashtag array into URL on submit
********************************************/
document.querySelector('#addHashtag').addEventListener("click", addHashtag);

function addHashtag() {
  chrome.runtime.sendMessage(hashtagInput.value);
}

фон. js

/******************************
# Inject likebot into page
******************************/
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {

  chrome.tabs.executeScript(tabId, {
    file: 'likeBot.js'
  }, _ => chrome.runtime.lastError /* "check" error */ )

});

/************************************************************
# Recieve message from likeBot.js and send it to popup.html
************************************************************/
let updateCount = document.getElementById('count');

chrome.runtime.onMessage.addListener(function(response, sender, sendResponse) {
  if (updateCount) {
    updateCount.innerHTML = response;
  }
  chrome.storage.sync.set({
    'value': response
  });
});

/************************************************************
# Recieve message from likeBot
************************************************************/
if (updateCount) {
  chrome.storage.sync.get('value', function(data) {
    updateCount.innerHTML = data.value;
  });
}

/************************************************************
# Grab and store hashtag from input field
************************************************************/
let hashtag = document.querySelector("#hashtagInput");
let userHash = [];

chrome.runtime.onMessage.addListener(function(hashtagInput, sender, sendResponse) {
  chrome.storage.sync.set({
        list:hashtagInput
    }, function() {
    });
  chrome.storage.sync.get({
      list:[] //put defaultvalues if any
  },
  function(data) {
     userHash.push(data.list);
     console.log('This is my array: ' + userHash);
     sendResponse(hashtagInput);
  }
  );
  sendResponse(userHash);
});

Я буду на другую пару часов, пытаясь выяснить это. Я был бы признателен за любую помощь, которую кто-то может мне дать. Фоновый сценарий. js успешно создает массив из пользовательского ввода, я просто не могу получить к нему доступ из своего сценария inject. js.

1 Ответ

1 голос
/ 21 января 2020
  1. В фоновом скрипте есть два прослушивателя onMessage, поэтому вам нужно объединить их в один, иначе только первый сможет отправить ответ
  2. API расширения является асинхронным, поэтому обратный вызов выполняется после того, как окружающий код уже завершен, что означает, что sendResponse (hashtagInput) ничего не сделает. Вам следует заменить последующий sendResponse (userHa sh) на return true, чтобы onMessage оставил канал открытым и заменил sendResponse (hashtagInput) чем-то, что отправляет обе переменные в одном объекте, например sendResponse({userHash, hashtagInput}) и Конечно, вызывающий обмен сообщениями должен быть изменен, чтобы отражать это также
  3. В настоящее время все sendResponse отправляют данные в ничто, потому что в sendMessage нет параметра обратного вызова, см. документацию обмена сообщениями для примеров.
  4. Фоновый скрипт запускается на скрытой отдельной фоновой странице, которая пуста и не связана с всплывающим окном действия браузера, поэтому не будет элементов DOM, таких как #hashtagInput и updateCount будет иметь значение null.
  5. Единственное, что вам нужно в фоновом скрипте - это chrome .tabs.onUpdated listener, поэтому удалите все остальное.
  6. Запись в хранилище во всплывающем скрипте
  7. Отправьте сообщение к вкладке во всплывающем скрипте, например:

    chrome.tabs.query({active: true, currentWindow: true}, ([tab]) => {
      chrome.tabs.sendMessage(tab.id, {foo: 'bar'});
    });
    
  8. Используйте devtools для отладки y наш код, проверять переменные, устанавливать точки останова, запускать строку за строкой, что в конечном итоге поможет вам действительно быстро решить такие простые проблемы.

Конечно, вам нужно будет еще кое-что настроить, прежде чем все это работает, например, для меня непонятно, почему вы вводите likeBot в каждую вкладку, которая обновляет свой заголовок, состояние слышимости, favicon, состояние загрузки. Возможно, вы захотите сделать это во всплывающем окне. js, чтобы вставить его только в активную вкладку, и, следовательно, вам не понадобится chrome .tabs.onUpdated и фоновый скрипт вообще.

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