小编Lea*_*way的帖子

我有一个向后台脚本发送消息的内容脚本：

chrome.runtime.sendMessage({site: "stackoverflow", options: { 
    url: url
  }}, function(res) {
    console.log(res);
  });

我的后台脚本有监听器：

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.site == "stackoverflow") {

      fetch(request.options.url)
      .then( (res) => {
        return res.text()
      })
      .then( (document_text) => {
        sendResponse({"one": "1"})
      })
    }
    //sendResponse({"one": "1"})
});

现在，在获取过程中，当我尝试发回响应时，我会进入undefined内容脚本。如果我在获取之外使用它：

chrome.runtime.onMessage.addListener(
  //...
      .then( (document_text) => {
        //sendResponse({"one": "1"})
      })
    }
    sendResponse({"one": "1"})
});

我的内容脚本日志{"one": "1"}。

为什么我会遇到这个问题？

当我过去将它作为一个应用程序运行时，我正在使用 fetch 从我的 react 组件调用 Web API，没有问题，但是当我运行应用程序 react 与 API 分开时，我收到 CORS 错误，我的 fetch 调用如下，

    componentDidMount() {
    console.log(clientConfiguration)

    fetch(clientConfiguration['communitiesApi.local'])
        .then((response) => {
            return response.json();                
        })
        .then(data => {
            console.log(data);
            let communitiesFromApi = data.map(community => { return { value: community, display: community } });
            this.setState({ communities: [{ value: '', display: 'Select a Community...' }].concat(communitiesFromApi) });    

        }).catch(error => {
            console.log(error);
        });
};

和我的 POST 调用也使用 Axios，如下所示。

    handleDownload = (e) => {
    e.preventDefault();

    var formData = new FormData();
    formData.append('communityname', this.state.selectedCommunity);
    formData.append('files', JSON.stringify(this.state['checkedFiles']));

    let …

我想在我的传单地图的右上角（距顶部 20 像素，距右侧 20 像素）添加一个按钮。问题是我不确定如何正确执行此操作。问题是当我使用那个传单类“leaflet-top Leaflet-right”时，我的按钮不可点击，当我将鼠标悬停在它上面时，没有任何反应。它只是作为地图的一部分。

这是我的 html 代码：

        <div id="mainContainer">
            <div id="mapDiv">
                <div id="map">
                    <div class="leaflet-top leaflet-right">
                        <div id="refreshButton"><div id="refreshButtonPictogram"><img src="pictograms/refresh.png" height="30px"></div></div>
                    </div>>
                </div>  
            </div>          
            <div id="bars"></div>
        </div>

这是我的CSS：

#mainContainer{
    position: relative;
    width: 100%;
    height: calc(100% - 80px);
    display: flex;
}

#bars{
    z-index: 0;
    width: 500px;
    overflow-x: auto;
    border-left: 1px solid rgb(214, 49, 65);
}

::-webkit-scrollbar {
    display: none;
}

#mapDiv {
    flex: 1;
}
#map {
    width: 100%;
    height: 100%;
    z-index: 0;
}

#refreshButton{
    display: flex;
    align-items: center; …

我已经安装并一直在使用查尔斯代理（4.5.6）。

我正在使用 Android 9。

Charles 在 Chrome 页面上工作（特别是 Instagram）：

但它不适用于 Instagram 应用程序：

当我使用该应用程序时，我总是收到该错误。

我应该“保存 Charles 根证书”然后将其安装在我的手机上吗？另外，为什么 Charles 可以在 Chrome 上工作，而不能在 Instagram 应用程序上工作？

假设我divs在某个 div 中有几个孩子

我希望红色的被包装在新的父级中div，但保持层次结构顺序（不作为最后一个子级附加，在本例中是第三个子级）。

我的做法：

var red = document.getElementById('red');

var parent = red.parentNode;

var new_div = document.createElement('DIV');

parent.appendChild(new_div);

new_div.appendChild(red);

1. 寻找红色元素
2. 转到红色元素的父节点
3. 创建新元素作为步骤 2 的子元素，但只知道该元素将是最后一个（appendChild 方法）
4. 在新创建的 div 中添加红色元素

我想用外行的话来说，我只是希望包装一些元素，并且包装的后果最小。可能是普通的 Javascript。

谢谢。